The 30 CSS Selectors you Must Memorize

Part 2

16. X[foo~="bar"]

Here's a special one that'll impress your friends. Not too many people know about this trick.

The tilda (~) symbol allows us to target an attribute which has a spaced-separated list of values.

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

<div id="container">
    <p> Lorem ipsum dolor sit amet,  <a title="Some title" 
data-info="external" href="http://www.google.com">
consectetur</a>  adipisicing elit, sed do <a href="http://
nettuts.com">Nettuts</a> tempor. </p>
    <p> Lorem ipsum <a href="http://net.tutsplus.com">
Nettuts+</a> sit amet, consectetur "
<a data-info="external image" href="http://d2o0t5hpnwv
4c1.cloudfront.net/839_git/preview.jpg">Getting Good 
with Git</a>" elit, sed do eiusmod tempor. </p>
</div>

17. X:checked

This pseudo class will only target a user interface element that has been checked - like a radio button, or checkbox. It's as simple as that.

input[type=radio]:checked + label {
   border: 1px solid red;
}

<form>
    <input type="radio" value="Radio Button" name="rad">
    <label for="rad"> Radio Button</label>
</form>

18. X:before, X:after

The before and after pseudo classes kick butt. Every day, it seems, people are finding new and creative ways to use them effectively. They simply generate content around the selected element.

.head1:before{
    content: url(smiley.gif);
}

.head2:after {
    content: url(smiley.gif);
}

<h1 class="head1">This is a heading</h1>
<p>The ::after pseudo-element inserts content 
after an element.</p>

<h1 class="head2">This is a heading</h1>
<p><b>Note:</b> IE8 supports the content 
property only if a !DOCTYPE is specified.</p>

19. X:hover

Oh come on. You know this one. The official term for this is user action pseudo class. It sounds confusing, but it really isn't. Want to apply specific styling when a user hovers over an element?

This will get the job done!

a:hover {
    background-color: yellow;
}

<a href="http://www.ecartstudio.com">
ecartstudio.com</a>
<a href="http://newweb.ecartstudio.org">
newweb.ecartstudio.org</a>

<p><b>Note:</b> The :hover selector style 
links on mouse-over.</p>

20. X:not(selector)

The negation pseudo class is particularly helpful. Let's say I want to select all divs, except for the one which has an id of container. The snippet above will handle that task perfectly.

p { 
    color: red; 
}
*:not(p) {
    color: green;
}
div:not(#container) {
    color: blue;
}

<div id="container">
   <p> Lorem ipsum dolor sit amet, consectetur </p>
   <a her="#"> Lorem ipsum  sit amet, consectetur</a>
</div>
<div> Lorem ipsum dolor sit amet, consectetur 
adipisicing elit, sed do eiusmod tempor incididunt 
ut labore et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco laboris 
nisi ut aliquip ex ea commodo consequat. </div>

22. X:nth-child(n)

Remember the days when we had no way to target specific elements in a stack? The nth-child pseudo class solves that!

Please note that nth-child accepts an integer as a parameter, however, this is not zero-based. If you wish to target the second list item, use li:nth-child(2).

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

<div id="container">
      <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>
 </div>

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

What if you had a huge list of items in a ul, and only needed to access, say, the third to the last item? Rather than doing li:nth-child(397), you could instead use the nth-last-child pseudo class.

This technique works almost identically from number sixteen above, however, the difference is that it begins at the end of the collection, and works its way back.

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

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

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

There will be times when, rather than selecting a child, you instead need to select according to the type of element.

Imagine mark-up that contains five unordered lists. If you wanted to style only the third ul, and didn't have a unique id to hook into, you could use the nth-of-type(n) pseudo class. In the snippet above, only the third ul will have a border around it.

p:nth-of-type(2) {
    background: #ff0000;
}

<div id="container">
    <h1>This is a heading</h1>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>
</div>

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

And yes, to remain consistent, we can also use nth-last-of-type to begin at the end of the selectors list, and work our way back to target the desired element.

p:nth-last-of-type(2) {
    background: #ff0000;
} 

<div id="container">
    <h1>This is a heading</h1>
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>
</div>

26. X:first-child

This structural pseudo class allows us to target only the first child of the element's parent. You'll often use this to remove borders from the first and last list items.

if select element not first-child, it not work.

p:first-child {
    background-color: yellow;
}

<div id="container">
    <p>This paragraph is the first child of its parent (body).</p>

    <h1>Welcome to My Homepage</h1>

    <p>This paragraph is not the first child of its parent.</p>
    <div>
        <p>This paragraph is the first child of its parent (div).</p>
        <p>This paragraph is not the first child of its parent.</p>
    </div>
    <p><b>Note:</b> For :first-child to work in IE8 and earlier, 
    a DOCTYPE must be declared.</p>
</div>

27. X:last-child

The opposite of first-child, last-child will target the last item of the element's parent. 

p:last-child {
    background: #ff0000;
}

<div id="container">
    <p>The first paragraph.</p>
    <p>The second paragraph.</p>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>
</div>

28. X:only-child

Truthfully, you probably won't find yourself using the only-child pseudo class too often. Nonetheless, it's available, should you need it.

It allows you to target elements which are the only child of its parent. For example, referencing the snippet above, only the paragraph that is the only child of the div will be colored, red.

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

<div><p> My paragraph here. </p></div>
 
<div>
    <p> Two paragraphs total. </p>
    <p> Two paragraphs total. </p>
</div>

29. X:only-of-type

This structural pseudo class can be used in some clever ways. It will target elements that do not have any siblings within its parent container.

li:only-of-type {
    background: #ff0000;
}

<ul>
    <li>This is a paragraph.</li>
</ul>

<ul>
    <li>This is a paragraph.</li>
    <li>This is a paragraph.</li>
</ul>

30. X:first-of-type

The first-of-type pseudo class allows you to select the first siblings of its type.

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

<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>

End

Credit : http://code.tutsplus.com