Jump to main content
Menu

Advanced CSS Selectors

CSS2 and CSS3 Selectors

Selector Usage and Effect Syntax
Universal Matches any element (it is a wildcard).

Note that the universal selector is unique among selectors in having a specificity of 0 in the cascade.

This can be used in a contextual setup, if you are styling everything within a certain element.

I recommend limited use of this, as it often results in unpleasant surprises.

Part of CSS2.1. 		* {font-size: 12px;}

The above code would render every element on the page as 12px font-size, unless overriden by another rule.
Child Indicates a parent>child relationship that your HTML code must then match.

The > character has no impact on specificity (it does not add anything).

Part of CSS2.1. 		p>strong {font-style: italic;}

The above code would render every <strong> with a parent of <p> as italic.

Note that this impacts only children and not descendants.
Direct Adjacent Indicates a sibling relationship that your HTML code must then match; the siblings must be immediate and share the same parent.

The + character has no impact on specificity (it does not add anything).

Part of CSS2.1. 		td+td {background: #000; color: #fff;}

The first table data cell would not be styled, but the next table data cell (and subsequent cells) would receive the black background and white text color.
Attribute Styles elements based on their attributes and the values of those attributes.

The specificity of attribute selectors is 10.

Part of CSS2.1. 		div[class] {font-size: 14px;}

Every <div> with a class attribute specified will have 14px text.

div[class="test"] {font-size: 16px;}

Every <div> with a class value of precisely "test" will have 16px text.

div[class~="test"] {font-size: 16px;}

The ~ indicates that the value must be part of a space-separated sequence of values, so in this case "test" must be one of the classes specified in a multi-class specification, such as <div class="test example">.

The value indicated (the class name specified) can appear anywhere in the sequence of space-separated values.

div[lang|="en"] {font-size: 18px;}

The | indicates that the value must be the start of a hyphen-separated value for that attribute. Used primarily for xml:lang and lang attributes and matching their language subcodes.

For example, the above code would match the "en" as well as the "en-us" (English United States) and "en-gb" (English Great Britain) values in the lang attribute.

div[class="example"][id] {background: #eee; color: #000;}

This example shows that attribute selectors can be combined. Divisions with class="example" as well as an id attribute would have a gray background and black text.

Note: You can use single or no quotes around the value (e.g., div[class='example'], if desired. You also do not need to include a simple selector.
Indirect Adjacent The elements share the same parent and the second element follows the first element, but it does not have to immediately follow the first element (like in the + direct adjacent selector).

The ~ character has no impact on specificity (it does not add anything).

Part of CSS3. 		div~table {border: 1px solid #000;}

The above code would apply to every <table> that follows a <div> in the code, as long as they shared the same parent element. The amount of tags between them would make no difference.
Prefix Substring Matching Looks for a match using the text at the start of an attribute's value.

The use of ^ for this follows typical syntax for Regular Expressions, which is a pattern matching approach used by numerous programming languages.

Part of CSS3. 		a[href^="https://"] {border-bottom: 3px double #000;}

The above code would put double border lines below secure links.
Suffix Substring Matching Looks for a match using the text at the end of an attribute's value.

The use of $ for this follows typical syntax for Regular Expressions, which is a pattern matching approach used by numerous programming languages.

Part of CSS3. 		a[href$=".pdf"] {font-weight: bold;}

The above code would boldface all links to PDF documents.
Instance Substring Matching Looks for a match somewhere in the attribute's value.

The use of * for this follows typical syntax for Regular Expressions, which is a pattern matching approach used by numerous programming languages.

Note that this is different from the universal selector, which selects elements. This is focused on attribute values.

Part of CSS3. 		a[title*="glossary"] {cursor: help;}

The above code would use the help cursor for all links with title values containing the word "glossary" in that attribute's value.

Code Examples

Universal Selector Example

See the Pen Universal Selector by Jason Withrow (@jwithrow) on CodePen.

Child Selector Example

See the Pen Child Selector by Jason Withrow (@jwithrow) on CodePen.

Adjacent Selector Example

See the Pen Adjacent Selector by Jason Withrow (@jwithrow) on CodePen.

Attribute Selector Example

See the Pen Attribute Selector by Jason Withrow (@jwithrow) on CodePen.

CSS3 Selectors Example

See the Pen CSS3 Selectors by Jason Withrow (@jwithrow) on CodePen.