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

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: