Lớp giả và phần tử giả trong CSS

by

Ở bài viết trước tôi đã tổng hợp lại các đơn vị đo hay sử dụng trong CSS, trong bài này tôi sẽ ghi lại một vài kiến thức về Lớp giả pseudo classes và phần tử giả Pseudo element.

Lớp giả Pseudo Classes trong CSS

Lớp giả (Pseudo Classes) được sử dụng để xác định trạng thái đặc biệt (vd như trạng thái khi dê chuột qua, khi click chuột vào, khi đã click vào link…) của một phần tử.

Tên của lớp giả không phân biệt chữ hoa và chữ thường. Lớp giả sẽ bắt đầu từ dấu hai chấm sau đó rồi đến tên của lớp giả

Một số các lớp giả hay gặp

  • :root lớp giả này tham chiếu tới phần tử gốc trong file html, tức là bao trùm tới cặp thẻ html của cả file html
  • :hover: lớp giả này được kích hoạt khi di chuyển chuột vào nó.

– Khi sử dụng lớp giả đối với các liên kết thứ tự bắt buộc phải tuân theo để hiệu ứng hoạt động được như sau:  link > visited > hover > active

VD muốn khi di chuột vào H1 chữ chuyển màu thì chỉ cần thêm thộc tính

H1:hover {
	Color: red;
}
  • :active: lớp giả này được kích hoạt khi bấm chuột vào nó
  • :first-child: sử dụng lớp giả này để lựa chọn được đứa con đầu tiên, last-child: lớp giả này để lựa chọn được đứa con cuối cùng Ví dụ trong danh sách
<ul>
<li></li>//con đầu
<li></li>
<li></li>//con cuối
</ul>

VD2:

<style>
p:first-child {
color:blue;
}
</style>
<body>
<p>đoạn văn 1</p>
<p>đoạn văn 2</p>
<div>
<p>đoạn văn 3</p>
<p>đoạn văn 4</p>
</div></body>

Trong vd trên thì đoạn văn 1 và đoạn văn 3 sẽ có màu xanh, vì đoạn văn 1 là con đầu tiên, đoạn văn 3 cũng là con đầu tiên trong thẻ div

VD3: chọn ra đc phần tử con đầu tiên trong tất cả các đoạn P là đoạn 1 và đoạn 3

<style>
p i:first-child{
color:blue}
<style></head>
<body>
<p>xin chào<i>đoạn 1</i><i>đoạn 2</i></p>
<p>xin chào<i>đoạn 3</i><i>đoạn 4</i></p>
</body>

VD4: chọn tất cả các thẻ <i> trong đoạn văn đầu tiên

<style>
p:first-child i{
color:blue;}
</style>
</head>
<body>
<p> xin chào <i> đoạn 1 </i>  <i> đoạn 2</i> </p>
<p> xin chào  <i>đoạn 3</i> <i> đoạn 4</i> </p
<div>
<p> xin chào <i> đoạn 5 </i>  <i> đoạn 6</i> </p>
<p> xin chào <i> đoạn 7 </i>  <i> đoạn 8</i> </p>
</div>

Trong code trên có đoạn 1, đoạn 2, đoạn 5, đoạn 6 được đổi màu

– Lớp giả có thể kết hợp với lớp trong html.

VD5: Có 2 liên kết, khi di chuyển chuột vào 1 liên kết nó đổi màu và kích thước chữ, liên kết còn lại giữ nguyên

<style>
a.lop1:hover {
color:#ff0000;
font-size:22px;
}
</style>
</head>
<body>
<p><a class="lop1" href="tinhocdao.com">Blog tin hocdao</a></p>
<p><a href="testurl.com">test</a></p>

– VD6 khi di chuột vào thì mới hiển thị ra đoạn văn

<style>
p{
display:none;
background-color: blue;
padding:20px;}
div:hover p{
display: block;}
</style></head>
<body>
<div>Đưa chuột vào đây để hiển thị đoạn văn
<p>xin chào, đoạn văn được hiển thị</p>
</div>

VD 7 Lựa chọn dòng đầu tiên trong đoạn

p::first-line{
color:white;
background:green;}

VD8 Lựa chọn ký tự đầu tiên

p::first-letter{
font-size:200%;
color: #8A2BE2;}

Trên đây là một vài khái niệm và ví dụ về lớp giả, ngoài ra bạn có thể vào website https://www.w3schools.com/css/css_pseudo_classes.asp để xem thêm một số các lớp giả khác.

Phần tử giả Pseudo element trong css

Phần tử giả: sử dụng để tạo ra những phần tử hiển thị cho website không cần tới mã html chỉ cần css

Các phần tử giả hay được sử dụng

::before và ::after: được sử dụng để chèn thêm các nội dung vào sau hoặc trước của một phần tử

h1::before {
        content: "nội dung chèn vào trước";
      }

VD: tạo ra một hình vuông kích thước 50×50 mà không cần dùng thẻ html nào

<style>
      .box {
        width: 100%;
        height: 120px;
        background: rgb(190, 124, 157);
      }
      .box::before {
        content: "";
        display: block;
        width: 50px;
        height: 50px;
        background-color: white;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <h1>CSS pseudo-elements</h1>

Giải thích một vài đoạn code trong .box::before : Mặc định thẻ div sẽ được trình duyệt gán cho thuộc tính display = block, nên khi ta sử dụng thẻ div sẽ không cần đặt thuộc tính này cho div.

Với Element giả không có thuộc tính display giống div nên cần phải cho display: block vào.

Content: chỉ là chuỗi rỗng nhưng nó rất quan trọng giúp cho element giả có thể tồn tại được.

sử dụng psedo elemant để tạo ra một hình vuông
Code ra một hình vuông bằng phần tử giả

Mỗi phần tử chỉ tồn tại được một before và một after, nên khi muốn có thêm 1 ô vuông như trên phải copy đoạn code xuống và đổi before thành after.

  • ::first-letter: dùng để chọn chữ cái đầu tiên
h1::first-letter {
        font-size: 50px;
      }
  • first-line: dùng để chọn dòng đầu tiên
 div::first-line {
        color: red;
      }
  • ::selection: có nghĩa là khi bôi chuột vào để lựa chọn
h1::selection {
        background-color: yellow;
        color: red;
      }
Selection giúp định dạng khi bôi chuột
Định dạng chữ đỏ nền vàng khi bôi đen

Trong đoạn code trên nếu bỏ h1 đi thì sẽ là tất cả nội dung trong trang đều sẽ được áp dụng.

  • ::marker: định dạng các điểm đánh dấu cho list items
::marker {
        color: blue;
        font-size: 18px;
      }
Định dạng màu sắc, kích thước cho các list item
Định dạng market cho list item

Trên đây là một số các lớp giả và phần tử giả hay gặp, hi vọng nó giúp ích cho bạn. Cảm ơn bạn đã theo dõi bài viết!

Leave a Comment