This is a cut down / edited version of the excellent work complied by Jeffry Way from this Net Tuts+ tutorial page. Basically I just removed some of the basics and a lot of the example code, and also most of the stuff not supported by IE versions less than 9. The idea is it’s a bit handier for quick use, mostly for my own reference and so I don’t have to dig info out of the w3c.org selectors page. I suppose we really all should memorize all these like Jeffry suggests so this is really a memory aid.
Also this is a link to the CSS selector Browser Compatibility Chart
Descendant selector.
li a {
text-decoration: none;
}
target the anchors which are children, grandchildren or further descendants of an li
Adjacent selector
ul + p {
color: red;
}
It will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each ul will have red text.
Child Selector
div#container > ul {
border: 1px solid black;
}
The difference between the standard X Y and X > Y is that the latter will only select direct children.
Sibling combinator
ul ~ p {
color: red;
}
similar to X + Y, however, it’s less strict. While an adjacent selector (ul + p) will only select the first element that is immediately preceded by the former selector, this one is more generalized. It will select, referring to our example above, any p elements, as long as they follow a ul.
Attributes selector examples
Only select the anchor tags that have a title attribute.
a[title] {
color: green;
}
Style all anchor tags which link to domain.com
a[href=”http://domain.com”%5D {
color: #1f6053;
}
Selects any anchor which is given a value of image for the custom attribute of custom-attribute
a[data-custom-attribute=”image”] {
color: red;
}
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;
}
<a href=”path/to/image.jpg” data-info=”external image”> Click Me </a>
This pseudo class will only target a user interface element that has been checked
input[type=radio]:checked {
border: 1px solid black;
}
Negation pseudo class
div:not(#container) {
color: blue;
}
select all divs, except for the one which has an id of container. (IE9+)
Byronyasgur's Blog 
Leave a comment