Những Selectors cần nhớ để bắt đầu với CSS3

12:34

30 CSS Selectors you must memorize.
Trong CSS, Selectors là những pattern dùng để chọn ra những element bạn muốn thực hiện style. Với cách chọn đối các element cơ bản bằng id và class bạn sẽ missing out sự linh hoạt của CSS, do đó bài viết này s cùng các bạn sẽ tìm hiểu thêm về các Selectors để chuẩn bị 'chiến đấu' với CSS3 - một cuộc cách mạng lớn.

#bl3 Một số Selector thuộc CSS3 nên khuyến cáo bạn nên sử dụng những browser hiện đại được update mới nhất. Hiện nay thì Chrome, Safari hỗ trợ tốt nhất cho CSS3 (những người mới thường năng động mà ^^)

Let's start the obvious ones out for the beginner before we move onto the more advanced selectors. ^^

1. *
#bl2 Kí tự * sẽ tham chiếu đến tất cả từng element trên trang của bạn. Thủ thuật này thường được các developer sử dụng để set padding và margin về 0. Lời khuyên là bạn không nên sử dụng nó quá nhiều vì sẽ làm tăng kích thước lên browser và chồng chéo css. Ngoài ra nó cũng dùng để tham chiếu đến tất cả các child element.
#bl2 Tương thích: IE6+, Firefox, Chrome, Safari, Opera

* {
 margin: 0;
 padding: 0;
}   
#container * {
 border: 1px solid black;
}

2. #id-name
#bl2 Tiền tố # cho phép chúng ta tham chiếu đến các element thông qua id. Đây là cách thông dụng nhất để tham chiếu đến một element xác định nhưng hãy thận trong khi dùng nó. Nó cứng nhắc và không cho phép tái sử dụng, với phong cách mới bạn nên đặt trước nó tên của tag.
#bl2 Tương thích: IE6+, Firefox, Chrome, Safari, Opera

* {
#container {  
   width: 960px;  
   margin: auto;  
} 
span#notice {  
   color: red;  
}

3. .class-name
#bl2 Kí tự . cho phép chúng ta tham chiếu đến các element thông qua class. Nó có thể tham chiếu đến một nhóm các element khác với dùng theo id là 'find a needle-in-a-haystack'.
#bl2 Tương thích: IE6+, Firefox, Chrome, Safari, Opera

* {
.error {  
  color: red;  
}

4. tag-name
#bl2 Điều gì nếu bạn muốn tham chiếu đến tất cả các tag a trong trang. Bạn không thể sử dụng class hoặc id vì nó quá phức tạp. Lúc này đã có type selectors, chỉ cần gọi tên tag mà không kèm theo bất kì kí tự nào khác
#bl2 Tương thích: IE6+, Firefox, Chrome, Safari, Opera

a { color: red; }  
ul { margin-left: 0; }

5. name name
#bl2 Đây là một descendant selector. Nó sẽ tham chiếu đến các element hậu duệ, được dùng khi bạn cần nhiều điểm riêng của element tham chiếu hơn các element còn lại.
#bl2 Tương thích: IE6+, Firefox, Chrome, Safari, Opera

li a {
  text-decoration: none;
}   
.sidebar div span {
  color: blue;
}

6. name > name
#bl2 Tham chiếu đến các element hậu duệ giống như 5. name name. Nhưng điểm khác biệt là nó chỉ tham chiếu trực tiếp đến các hậu duệ gần nhất.
#bl2 Tương thích: IE7+, Firefox, Chrome, Safari, Opera

div#container > ul {  
  border: 1px solid black;  
}

7. name1 + name2
#bl2 Selector này sẽ tham chiếu đến name2 nếu name2 nằm liền kề sau name1. Nó sẽ không làm việc nếu giữa name1 và name2 có bất kì element nào khác.
#bl2 Tương thích: IE7+, Firefox, Chrome, Safari, Opera

ul + p {  
   color: red;  
}

8. name1 ~ name
#bl2 Nó cũng tham chiếu đến các sibling elements giống như 7. name + name nhưng nó ít nghiêm ngặc hơn. Trong khi ở trên chỉ tham chiếu đến element đầu tiên liền kề ngay sau nó thì selector này cho phép tham chiếu đến tất cả các element liền sau.
#bl2 Tương thích: IE7+, Firefox, Chrome, Safari, Opera

ul ~ p {  
   color: red;  
}

9. :link, :visited, :active, :hover
#bl2 Đây là pseudo-class tham chiếu đến các tag a và style cho từng sự kiện. Đối với 1 tag a cơ bản ta có 4 sự kiện chính: liên kết mặc định (:link), liên kết đã được click (:visited), liên kết đang được focus (:hover), liên kết được nhấn chọn (:active). Lưu ý thứ tự các sự kiện đặt đúng thứ tự như demo để đảm bảo chúng hoạt động tốt.
#bl2 Tương thích: IE7+, Firefox, Chrome, Safari, Opera

a:link    {color:green;}
a:visited {color:blue;}
a:hover   {color:red;}
a:active  {color:yellow;}

10. name[attribute]
#bl2 Bạn cần tham chiếu đến một hoặc nhiều tag element có thuộc tính xác định thì đây là selector thích hợp để làm điều đó.
#bl2 Tương thích: IE7+, Firefox, Chrome, Safari, Opera

a[title] {  
   color: green;  
}

11. name[attribute="value"]
#bl2 Sẽ tham chiếu đến các element có thuộc tính với giá trị xác định, những element không có thuộc tính hoặc thuộc tính không phù hợp sẽ không được tham chiếu. Nó làm việc khá tốt nhưng nó khá cững nhắc.
"Note that we're must wrapping the value in quotes (Lưu ý chúng ta phải đặt giá trị trong dấu nháy đôi)"
#bl2 Tương thích: IE7+, Firefox, Chrome, Safari, Opera

a[href="http://www.blogit.info"] {  
  color: #1f6053; /* green */  
}

12. name[attribute*="value"]
#bl2 Đây là những gì cần thiết. Selector sẽ tham chiếu đến các element có giá trị thuộc tính chứa cụm từ được xác định ở bất cứ đâu, không cần phải hoàn toàn chính xác như phía trên.
#bl2 Tương thích: IE7+, Firefox, Chrome, Safari, Opera

a[href*="blogit"] {  
  color: #1f6053;  
}

13. name[attribute^="value"]
#bl2 Với selector này, ta có thể tham chiếu đến element có thuộc tính mang giá trị bắt đầu bằng value. Chỉ cần thêm kí tự carat "^" như phía dưới
#bl2 Tương thích: IE7+, Firefox, Chrome, Safari, Opera

a[href^="http"] {  
   background: url(path/to/external/icon.png) no-repeat;  
   padding-left: 10px;  
}

14. name[attribute$="value"]
#bl2 Trái ngược với selector trên, nó tham chiếu đến element có thuộc tính mang giá trị kết thúc bằng value.
#bl2 Tương thích: IE7+, Firefox, Chrome, Safari, Opera

a[href$=".jpg"] {  
   color: red;  
}

14. name[attributename="value"]
#bl2 Chuyện gì xảy ra nếu chúng ta muốn tham chiếu đến tất cả liên kết đến mọi định dang file ảnh .jpg, .png, .gif. Nếu sử dụng với kí tự $, chúng ta cần nhiều dòng css. Để linh động, chúng ta có thể tự đặt thuộc tính riêng attribute-name (thông thường nta sẽ bắt đầu với data-tentudat).
#bl2 Tương thích: IE7+, Firefox, Chrome, Safari, Opera

<a data-filetype="image" href="http://www.blogger.com/path/to/image.jpg"> Image Link </a>
a[data-filetype="image"] {  
   color: red;  
}

15. name[attributename~="value1 value2 ..."]
#bl2 Việc khai báo này tương tự như Class. Giúp chúng ta có thẻ tham chiếu đến từng attribute trong một danh sách các attribute dc khai báo phía trên.
#bl2 Tương thích: IE7+, Firefox, Chrome, Safari, Opera

<a data-info="external image" href="http://www.blogger.com/path/to/image.jpg"> Image Link </a>
/* Target data-info attr that contains the value "external" */  
a[data-info~="external"] {  
   color: red;  
}  
  
/* And which contain the value "image" */  
a[data-info~="image"] {  
  border: 1px solid black;  
}

16. :checked
#bl2 Pseudo class này chỉ target đến những element có thuộc tính checked như radio and checkbox. Hãy xem ví dụ sau bạn sẽ rõ
#bl2 Tương thích: IE9+, Firefox, Chrome, Safari, Opera

input[type=radio]:checked {  
   border: 1px solid black;   
}

17. name:before và name:after
#bl2 Điều này thật sự hấp dẫn ở CSS3. Nó sẽ tự động nối một space trước hoặc sau đối tượng, khi không khai báo nữa nó sẽ tự động biến mất. Với CSS bạn có thể có được kết quả bất ngờ như demo
#bl2 Tương thích: IE8+, Firefox, Chrome, Safari, Opera

<href="" class="button add"> Image Link </a>
.add:before {
content: "\271A";
}
 // Chú ý có thể sử dụng .add::before

18. name:not[selector]
#bl2 Negation pseudo class này thật sự hữu ích. Nó có nghĩa là loại trừ selector dc tham chiếu tới. Ví dụ dưới đây sẽ target đến tất cả các div ngoại trừ #container
#bl2 Tương thích: IE9+, Firefox, Chrome, Safari, Opera

div:not(#container) {  
   color: blue;  
}

19. name::first-line và name::first-letter
#bl2 Selector này chỉ dùng cho tag p. Nó sẽ target đến dòng đầu tiên (first-line) và kí tự đầu tiên (first-letter)
#bl2 Tương thích: IE9+, Firefox, Chrome, Safari, Opera

p::first-letter {  
   float: left;  
   font-size: 2em;  
   font-weight: bold;  
   font-family: cursive;  
   padding-right: 2px;  
}    
p::first-line {  
   font-weight: bold;  
   font-size: 1.2em;  
}

20. name:nth-child(n) và name:nth-last-child(n)
#bl2 Giả sử bạn có một tag ul gồm nhiều các tag li bên trong như ví dụ. Bây giờ bạn muốn target đến tag li thứ 2 của ul, vậy làm sao?! Selector này sẽ giúp bạn điều đó. Với n là thứ tự element bạn cần tham chiếu đến từ trên xuống (nth-last-child(n) với n từ dưới lên). Nếu có nhiều element phù hợp nó sẽ target đến tất cả.
#bl2 Tương thích: IE9+, Firefox, Chrome, Safari, Opera

<ul>
         <li> List Item
         <ul>
            <li> Child </li>
            <li> Child </li>
            <li> Child </li>
         </ul>
         </li>
         <li> List Item </li>
         <li> List Item </li>
         <li> List Item </li>
 </ul>

   li:nth-child(2) {
         color: red;
       }

21. name:only-child và name:only-of-type
#bl2 only-child: Chỉ tồn tại một element "name" duy nhất và không element nào nữa.
only-of-type: Chỉ tồn tại một element "name" duy nhất nhưng có thể chấp nhận các tag khác loại
#bl2 Tương thích: IE9+, Firefox, Chrome, Safari, Opera

div p:only-child {  
   color: red;  
}  
  
div p:only-of-type {
         color: red;
}

#bl2 Xem demo
#bl2 Xem demo

22. name:first-child(n) và name:last-child(n)
#bl2 Như tên của 2 selectors này đã thể hiện, nó sẽ target đến element "name" đầu tiên và cuối cùng. Selector này rất có ích trong thiết kế menu
#bl2 Tương thích: IE9+, Firefox, Chrome, Safari, Opera

li:first-child {  
    border-top: none;  
}  
  
li:last-child {  
   border-bottom: none;  
}

#bl2 Xem demo

#blsrc Tham khảo thêm wWw.w3school.com

wWw.BlogIT.info chia sẻ theo W3C 4.5

0 Nhận xét