30 سلکتور CSS که طراحان وب باید بدانند

1 - Selector *

* {
 margin: 0;
 padding: 0;
}

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

• IE6+
• Firefox
• Chrome
• Safari
• Opera

2 - X Selector#

#container {
   width: 960px;
   margin: auto;
}

• IE6+
• Firefox
• Chrome
• Safari
• Opera

3. X Selector.

.error {
  color: red;
}

• IE6+
• Firefox
• Chrome
• Safari
• Opera

4. X Y Selector

li a {
  text-decoration: none;
}

• IE6+
• Firefox
• Chrome
• Safari
• Opera

5. X Selector

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

• IE6+
• Firefox
• Chrome
• Safari
• Opera

6. X:visited و X:link

a:link { color: red; }
a:visted { color: purple; }

• IE7+
• Firefox
• Chrome
• Safari
• Opera

7. X + Y Selector

ul + p {
   color: red;
}

• IE7+
• Firefox
• Chrome
• Safari
• Opera

8. X > Y Selector

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

<div id="container">
   <ul>
      <li> List Item
        <ul>
           <li> Child </li>
        </ul>
      </li>
      <li> List Item </li>
      <li> List Item </li>
      <li> List Item </li>
   </ul>
</div>

• IE7+
• Firefox
• Chrome
• Safari
• Opera

9. X ~ Y Selector

ul ~ p {
   color: red;
}

• IE7+
• Firefox
• Chrome
• Safari
• Opera

a[title] {
   color: green;
}

• IE7+
• Firefox
• Chrome
• Safari
• Opera

11. X[href="foo"] Selector

a[href="http://net.tutsplus.com"] {
  color: #1f6053; /* nettuts green */
}

• IE7+
• Firefox
• Chrome
• Safari
• Opera

12. X[href*="nettuts"] Selector

a[href*="tuts"] {
  color: #1f6053; /* nettuts green */
}

• IE7+
• Firefox
• Chrome
• Safari
• Opera

13. X[href^="http"] Selector

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

• IE7+
• Firefox
• Chrome
• Safari
• Opera

14. X[href$=".jpg"] Selector

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

• IE7+
• Firefox
• Chrome
• Safari
• Opera

15. X[data-*="foo"] Selector

a[data-filetype="image"] {
   color: red;
}

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
   color: red;
}

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

a[data-filetype="image"] {
   color: red;
}

• IE7+
• Firefox
• Chrome
• Safari
• Opera

16. X[foo~="bar"] Selector

 X[foo~="bar"]a[data-info~="external"] {
   color: red;
}
 
a[data-info~="image"] {
   border: 1px solid black;
}

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </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;
}

• IE7+
• Firefox
• Chrome
• Safari
• Opera

17. X:checked Selector

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

• IE9+
• Firefox
• Chrome
• Safari
• Opera

18. X:after Selector

.clearfix:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
    }
 
.clearfix {
   *display: inline-block;
   _height: 1%;
}

• IE8+
• Firefox
• Chrome
• Safari
• Opera

19. X:hover

div:hover {
  background: #e3e3e3;
}

a:hover {
 border-bottom: 1px solid black;
}

• IE6+ (In IE6, :hover must be applied to an anchor element)
• Firefox
• Chrome
• Safari
• Opera

20. X:not Selector

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

*:not(p) {
  color: green;
}

• IE9+
• Firefox
• Chrome
• Safari
• Opera

21. X::pseudoElement Selector

p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

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

• IE6+
• Firefox
• Chrome
• Safari
• Opera

22. X:nth-child(n) Selector

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

• IE9+
• Firefox 3.5+
• Chrome
• Safari

23. X:nth-last-child(n) Selector

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

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

24. X:nth-of-type(n) Selector

ul:nth-of-type(3) {
   border: 1px solid black;
}

• IE9+
• Firefox 3.5+
• Chrome
• Safari

25. X:nth-last-of-type(n) Selector

ul:nth-last-of-type(3) {
   border: 1px solid black;
}

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

26. X:first-child Selector

ul li:first-child {
   border-top: none;
}

• IE7+
• Firefox
• Chrome
• Safari
• Opera

27. X:last-child Selector

ul > li:last-child {
   color: green;
}

• پشتیبانی مرورگر ها :
• IE9+
• Firefox
• Chrome
• Safari
• Opera

28. X:only-child Selector

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

• IE9+
• Firefox
• Chrome
• Safari
• Opera

29. X:only-of-type Selector

li:only-of-type {
   font-weight: bold;
}

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

30. X:first-of-type Selector

<div>
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1 </li>
      <li> List Item 2 </li>
   </ul>
 
   <ul>
      <li> List Item 3 </li>
      <li> List Item 4 </li>
   </ul>   
</div>

ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}

p + ul li:last-child {
   font-weight: bold;
}

ul:first-of-type li:nth-last-child(1) {
   font-weight: bold;   
}

• IE9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

نتیجه گیری