Important CSS3 Selectors You Need To Know

CSS3 Selectors Techhyme

CSS3 features an entire toolbox of new selectors that allow you to select more specific elements for styling while nullifying the need for a lot of those arbitrary IDs and classes you tend to often include to select “the last item in the list,” or “the first paragraph in the post that always contains the introduction.

For more detailed reference, please visit www.w3.org/community/webed/wiki/Advanced_CSS_selectors.

Below is the list of some of the most powerful and interesting ones (as well as some seldom-explored selectors first included in CSS2) to give you a good flavor of what selectors are now capable of.

S.NO. SELECTOR EXAMPLE DESCRIPTION BROWSER SUPPORT
1 Universal * Selects everything on the page. All
2 Attribute img[alt] Selects all of the specified elements that have the specified attribute. Ideal for accessibility testing if you want to highlight images with and without alt attributes. Not IE6 or earlier.
img[src=”alert.gif”] Selects all of the specified elements that have the specified attribute with the specified value. Useful for selecting specific images or other elements without needing extra IDs or classes. Not IE6 or earlier.
img[src = alert ] Selects all of the specified elements that have the specified string at the start of the attribute value. Not IE6 or earlier.
img[src$=”gif”] Selects all of the specified elements that have the specified string at the start of the attribute value Not IE6 or earlier
a[href*=”uk”] Selects all of the specified elements that have the specified string somewhere inside the attribute Value. These are useful for adding special styling or icons to specific content for example, links to resources just about the UK or links to PDFs. Not IE6 or earlier
article[class~= “feature”] Selects all of the specified elements that have the specified string inside the attribute value, but only if it is a single value in a space delimited list of values. Not IE6 or earlier
article[id|=”feature”] Selects all of the specified elements that have the specified string inside the attribute value, but only if it is a single value in a hyphen-delimited list of values. These last two selectors might be Potentially useful if you are trying to select elements based on some kind of horrible tagging system inserted into attributes by a CMS. Not IE6 or earlier
3 Descendant nav a Selects the element on the right only if it is nested somewhere inside the element(s) to the left. You can chain more than two together.

For example, nav li a.

All.
4 Child body>header Selects the element on the right only if it is nested somewhere inside the element(s) to the left. You can chain more than two together .

For example,  body>header

Not IE6 or earlier
5 Adjacent sibling h1 + p Selects the element on the right only if it comes   immediately after the element on the left in the   source order, and they are siblings at the same nesting level. It’s perfect if, for example, you set paragraphs to have an indent on the first line but want to remove that indent for the first line after each heading. Not IE6 or earlier
6 General sibling h1 ~ img Selects the element on the right only if it is a sibling (at the same nesting level)  as the element on the left. It’s great for setting that indent mentioned giving a special styling only to images inside an article at the same level as a heading. Not IE6 or earlier
7 UI element pseudo-classes a:link Styles the default state of link All
a:visited Styles links when they’ve already been visited All
img:hover Style elements when they’re hovered over All
input:focus Style element when they’re given focus (e.g. with the keyboard) All
a:active Styles links while they are being activated (e.g. by being clicked on ) All
input:valid Styles form inputs that contain valid data. These types of selectors are very useful for giving users hints about whether their form data is valid or not. Not supported in IE.
input:invalid Styles form inputs that contain invalid  data. Not supported in IE.
input:enabled Styles enabled form inputs. All
input:disabled Styles disabled form inputs. All
input:in-range Styles form inputs that contain data that is inside the valid range. Not supported in IE.
input:out-of-range Styles form inputs that contain data that is outside the valid range. Not supported in IE.
8 Negation selector input:not([type=”submit”]) Styles the specified element if it isn’t selected by the simple selector(s) inside the parentheses. This is useful in cases where you have several similar elements and want to select them all except for one of two.

For example, when laying out a form you’ll want to give most of the inputs an equal width but not the submit or file inputs. You can include multiple selectors to negate inside the parentheses in a comma-delimited list.

For example, input:not ([type=”submit”],[type=”file”]).

Not IE8 or earlier.
9 Language selector p:lang(en-US) Styles the specified element only if it has the language inside the parentheses set on it via the lang attribute. Not IE6 or earlier.
10 Target selector article:target Styles the element only if it is the target of a link. It’s incredibly cool for making content appear at the click of a button, such as overlays, information boxes, or different tabs in a tabbed interface, with- out needing JavaScript. The main problem is that each new state will be at a different URL, so it can break the expected Back button functionality. Not IE8 or earlier.
11 Structural pseudo-classes :root Styles the root element of the document, which is pretty much always <html>! Not IE8 or earlier
li:nth-child(2n+1) In a series of child elements, styles the elements specified by the formula in the parentheses. So, for example, this formula would select all odd- numbered list items (1,3,5 etc.). It’s great for zebra striping to enhance readability. Not IE8 or earlier
li:nth-last-child(2n+1) Works the same as nth-child but starts at the last element and works backwards. Not IE8 or earlier
p:nth-of-type(3) Works the same as nth-child but ignores elements not of the type specified. I usually use this just to earlier. Select a single child element or a certain type. Not IE8 or earlier
:nth-last-of-type(1) Works the same as nth-of-type, except that it counts backwards from the last child element. Not IE8 or earlier
p:first-child Selects the first child in a series of child elements, if it is of the type specified. Not IE8 or earlier
p:first-of-type Selects the last child in a series of child elements, Not IE8 or earlier
li:only-child Selects the only child of an element if it is of the type specified. This is useful if, for example, you   earlier. Want to give list items a special styling only if there is one list item present. You might want to omit the bullet point because it is pointless and looks silly if there is only one bullet! Not IE8 or earlier
section p:only-of-type Selects the specified element if it is the only one of its type inside its parent. Not IE8 or earlier
:empty Selects an element only if it has no children. Not IE8 or earlier
12 Pseudo-elements p:first-letter Selects the first letter inside an element. It’s perfect for making drop caps! Not IE6 or earlier
p:first-line Selects the first line of text inside an element. This is good for giving an intro paragraph an interesting look-for example, putting the first line in small caps. Not IE6 or earlier
a:before Allows you to generate content before the specified element for example, adding icons before certain earlier. Content. Not IE7 or earlier.
a:after Allows you to generate content after the specified content- for example placing a copyright symbol earlier. After certain pieces of content. Not IE7 or earlier