Những CSS Selectors hay ho có thể anh em chưa hề biết ?
Hello các bác , lại là culi đây !! Thông thường khi các bác giải quuyết các vấn đề liên quan tới "styling" thì mình khuyên các bạn nên sử dụng CSS thay vì
Selectors là cái gì ?
Nghe tên đã hiểu, rõ ràng selectors sẽ giúp chúng ta chọn (tìm) ra một element từ đoạn code dài dòng của chúng ta .
Bạn hãy đọc dùm mình đoạn code bên dưới 10s rồi tính tiếp ^^
HTML :
HTML :
<ul class="list">
<li class="list-item">List item 1</li>
<li class="list-item">List item 2</li>
<li class="list-item">List item 3</li>
<li class="list-item">List item 4</li>
<li class="list-item">List item 5</li>
<li class="list-item">List item 6</li>
<li class="list-item">List item 7</li>
<li class="list-item">List item 8</li>
<li class="list-item">List item 9</li>
<li class="list-item">List item 10</li>
<li class="list-item">List item 11</li>
<li class="list-item">List item 12</li>
<li class="list-item">List item 13</li>
<li class="list-item">List item 14</li>
</ul>
Từ đoạn code trên để chọn ra các element mong muốn ta sẽ có các thao tác selector cơ bản sau :
Loại chọn ra các element ở thứ tự là số chẵn :
Loại chọn ra các element ở thứ tự là số chẵn :
ul.list > li:nth-child(even) {
color: orange;
}
/* or */
ul.list > li:nth-child(2n) {
color: orange;
}
Loại chọn ra các element ở thứ tự là số lẻ :ul.list > li:nth-child(odd) {
color: orange;
}
/* or */
ul.list > li:nth-child(2n+1) {
color: orange;
}
Dễ hiểu 2 cách trên lần lượt chọn các element ở vị trí 2n (chẵn) và 2n+1 (lẻ) và dĩ nhiên là tính từ phần tử đầu tiên . Mở rộng ra một tí , khi bạn muốn chọn các element ở các phần tử có số thứ tự là 3*n( Ví dụ 0,3,6,9,12,...) và chỉ chọn ra các element tính từ element thứ 5 trở đi, đoạn code sau đây sẽ giúp ta làm điều trên :
Nghe tên hơi khó hiểu, ta cùng tìm hiểu qua ví dụ sau :
CSS :
HTML :
Như các bạn đã thấy, với css selector article + p thì những element có thẻ article và liền kề sau đó là thẻ p thì element đó mới được chọn .
CSS :
ul.list > li:nth-child(3n+5) {
color: orange;
}
- Loại chọn ra các element ở những vị trí thuộc dạng cạnh bên nhau :
Nghe tên hơi khó hiểu, ta cùng tìm hiểu qua ví dụ sau :
CSS :
article + p {
color: orange;
}
HTML :
<section>
<article>Article 1</article>
<p>Paragraph 1</p> <!-- element này sẽ được chọn -->
<article>Article 2</article>
<article>Article 3</article>
<div>Div 1</div>
<p>Paragraph 2</p>
<article>Article 4</article>
<p>Paragraph 3</p> <!-- element này sẽ được chọn -->
</section>
Như các bạn đã thấy, với css selector article + p thì những element có thẻ article và liền kề sau đó là thẻ p thì element đó mới được chọn .
- Loại chọn ra các element ở những vị trí thuộc dạng "đoạn"
CSS :
article ~ p {
color: orange;
}
HTML :
<section>
<p>Paragraph 1</p>
<article>Article 1</article>
<article>Article 2</article>
<article>Article 3</article>
<div>Div 1</div>
<p>Paragraph 2</p> <!-- element này sẽ được chọn -->
<article>Article 4</article>
<article>Article 5</article>
<div>Div 2</div>
<p>Paragraph 3</p> <!-- element này sẽ được chọn -->
</section>
- Loại chọn các element với attribute phụ thuộc vào giá trị cho trước
Ở loại [attribute^=value] thì sẽ chọn ra các element có dạng attribute và giá trị của attribute đó sẽ bắt đầu bằng value
HTML :
<ul class="list"> <li class="list-item">List item 1</li> <li class="list-item">List item 2</li> <li class="disabled-list-item">List item 3</li> <!-- element này sẽ được chọn --> <li class="list-item">List item 4</li> <li class="list-item">List item 5</li> <li class="disabled-list-item">List item 6</li> <!-- element này sẽ được chọn --> <li class="list-item">List item 7</li> <li class="disabled-list-item">List item 8</li> <!-- element này sẽ được chọn --> </ul>
CSS :
ul.list > li[class^="disabled"] { color:orange }
Bạn đã hiểu selector với [attribute^=value] chưa ? Nếu rồi thì 2 loại sau sẽ cực dễ dàng . Nếu [attribute^=value] sẽ chọn ra các element có dạng attribute và giá trị của attribute đó sẽ bắt đầu bằng value , thì sẽ có 2 loại tương tự là :
- [attribute$=value] : chọn ra các element có attribute và giá trị của attribute đó kết thúc bằng value
- [attribute*=value] : chọn ra các element có attribute và giá trị của attribute đó chứa value
Loại selector với các pseudo-class
- element:position : chọn ra các position đã chỉ định với element đang thao tác
Ta cùng xem ví dụ :
HTML :
<section> <p> Paragraph 1 First Line <!-- element này sẽ được chọn --> <br> Paragraph 1 Second Line </p> <article>Article 1</article> <article>Article 2</article> <article>Article 3</article> <div>Div 1</div> <p>Paragraph 2</p> <!-- this line will be highlighted --> <article>Article 4</article> <article>Article 5</article> <div>Div 2</div> <p> Paragraph 3 First Line <!--element này sẽ được chọn --> <br> Paragraph 3 Second Line </p> </section>
CSS :
section > p::first-line { color: orange }
- input:in-range : loại này đặc biệt chỉ áo dụng với thẻ input . Trong đó, nội dung được chọn sẽ là phần nội dung mà input chỉ định Ví dụ :
HTML :
<input type="number" min="7" max="12" value="8" />
CSS :
input:in-range { border: 2px solid green }
Tương tự với input:out-of-range thì phần nội dung bên ngoài range chỉ định sẽ được chọn, quá dễ hiểu đúng không nào !
- :target : Dễ hiểu với loại này sẽ chọn các element element có thể click vào . Ví dụ với thẻ href thì loại selector này sẽ định nghĩa "màu mè, style" khi bạn click vào thẻ href
Thở phào tóm lại
Hổm rài nghỉ tết anh em có vui không ? Sang năm mới rồi thấy có challenge nào không ? Thôi thì đầu năm cũng mong mang đến anh em một vài "chuyện" xung quanh CSS bổ ích rất mong sẽ giúp ích được anh em . Mong rằng sau bài blog này anh em có dịp vọc vạch hơn nhiều với CSS và tận dụng hết "công lực" của CSS . Chúc anh em một năm mới vui vẻ và thành công thắng lợi !!
Nếu thấy hữu ích hãy Like Page bên dưới để nhận bài viết mới anh em nhé !!!
Nếu thấy hữu ích hãy Like Page bên dưới để nhận bài viết mới anh em nhé !!!
Nhận xét
Đăng nhận xét