Byronyasgur's Blog

Random Web Developer Stuff, Mostly WordPress

CSS Selectors

on September 5, 2011

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

a[href=””%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+)


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: