Selector trong CSS có thể bạn chưa biết

Chúng ta hãy cùng tìm hiểu về các selector trong css làm cho việc style trang web của bạn trở lên dễ dàng hơn. Ví dụ, bạn có thể chọn các phần tử chẵn (even) và lẻ (odd), phần tử đầu tiên (first) và cuối cùng (last), và nhiều hơn nữa. Trong bài viết này chúng ta sẽ đi qua các kịch bản khác nhau của selector và làm thế nào để sử dụng chúng. Chúng ta sẽ không đi sâu vào các selector quen thuộc như lựa chọn bởi ID và class.

Hãy bắt đầu với các selector. Đối với các selector đơn giản, tôi sẽ chỉ giải thích cách chúng làm việc. Đối với những selector phức tạp hơn, bạn sẽ thấy một đoạn code của selector trong bài viết.

First Line and First Letter

p:first-letter | chọn chữ cái đầu tiên trong thẻ p

p:first-line | chọn dòng đầu tiên trong thẻ p

<style>
p                     {
  color:#B76E2D;
  font-size:18px;
  line-height:1.7;
}

p::first-letter       { 
  color:#B76E2D;
  float:left;
  font-size:60px; 
  font-weight:bold; 
  line-height:1;
  margin-right:12px;  
  text-shadow:3px 5px 0 #232839;
  transform:rotate(-2deg);  
}

p::first-line         {
  color:#232839;
  font-size:25px;
  line-height:1.5;
}
</style>

Before and After

:before | Thêm phần tử trước đứng trước phần tử hiên tại

:after | Thêm phần tử trước đứng sau phần tử hiên tại

<style>
h1 {
  color:#FFF;
  font-family:'Oswald';
  font-weight:700;
  position:relative;  
  margin:30px auto;
  text-transform:uppercase;
  width:300px;
}

h1:before, h1:after {
  background:#D4CD36;
  content:"";
  display:block;
  height:30px;
  position:absolute;
  width:25px;
}

h1:before  {  
  left:0;
  top:9px;
  border-radius: 90px 0 0 90px;
  -moz-border-radius: 90px 0 0 90px;
  -webkit-border-radius: 90px 0 0 90px;
}

h1:after   {
  right:0;
  top:9px;
  border-radius: 0 90px 90px 0;
  -moz-border-radius: 0 90px 90px 0;
  -webkit-border-radius:  0 90px 90px 0;
}
</style>

Siblings and Children

body > p | Chọn thẻ p là con gần kề của thẻ body
h1 + p | Chọn thẻ p ngay sau thẻ h1
h1 ~ p | Chọn tất cả các thẻ p theo sau thẻ h1

:nth-child Pseudo Classes

tr:first-child / tr:last-child | Chọn tr đầu tiên / cuối cùng của table

tr:nth-child(odd) / tr:nth-child(even) | Chọn tr lẻ / chẵn của table

tr:nth-child(10n-1) | Chọn các tr có số thứ tự 9, 19, 29 ...

tr:nth-child(-n+6) | Chọn 6 tr đầu tiên của table

Attribute Selectors

[attr~=”value”] | a[rel~=”copyright”] | Chọn bất kì phần tử nào có attr = value (bạn có thể chọn nhiều value, mỗi value cách nhau bằng dấu cách)

[attr|=”value”] | a[lang|=”en”] | Chọn bất kì phần tử nào có attr lang có value bắt đầu bằng en

[attr^=”value”] | img[src^=”images/”] | Chọn bất kì phần tử nào có value bắt đầu = images/ và kết thúc với kí tự bất kì

[attr$=”value”] | a[href$=”.html”] | Chọn bất kì phần tử nào có value bắt đầu với kí tự bất kì và kết thúc = .html

Trên đây là 1 số Selector, Hy vọng nó lá hữu ích với bạn để quá trình làm việc với HTML & CSS của bạn nó trở nên dễ dàng và thú vị hơn.