Important CSS3 Selectors You Need To Know

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

You may also like:

Related Posts