CSS Selectors

From Exterior Memory
Jump to: navigation, search

CSS Selectors

CSS uses selectors to define which rules apply to which HTML elements. The formal specification is available at CSS3 selectors. Here are some excerpts.

CSS1 Selectors

Selector Name Matches
* Universal Selector Matches any element
h1 Type/Tag Selector <h1>Title</h1>
.note Class Selector <p class="note">Hello!</p>
p.note Combined Tag + Class Selector <p class="note">Hello!</p>
#foot ID Selector <p id="foot">Footer</p>
#header ul Descendant/Contextual Selector <div id="header"><ul> ...
(only affects ul instead the header, not other ul)
h1,h2,h3 Group Selector Matches any of <h1>, <h2>, or <h3>
a:visited Link Selectors Matches visited links
a:hover Dynamic Pseudo Selectors Matches when the mouse hovers over the element.

CSS2 selectors

Selector Name Matches
#header > ul Child Selector <div id="header"><ul> ...
(unlike a descendant selector, this only matches a direct child of the parent.)
li + li Adjacent Selector Matches an <li>, which is preceded by another <li>
p:first-child First Child Pseudo-Selectors Matches the first <p> of a list of <p> elements.
:lang(en) Language Pseudo Selectors Matches text in a given language.
A[href] Attribute Selectors Matches <a href="link">, but not <a id="label">
input[type=submit] Attribute Selectors Matches <input type="submit">, but not <input type="text">
p:first-letter First Letter Pseudo-Selectors Matches the first letter of a text.
a:before Before/After Pseudo-Selectors Allows additions before or after an element.

CSS3 selectors

Selector Name Matches
h1 ~ p Sibling Selector Matches an <p>, which is preceded by a <h1>

(unlike the Adjacent Selector li + li, this does not need to be directly adjacent.)

p:target Target Pseudo-Selectors Matches the target of a URL. E.g. <a id="here"> in the URL http://www.example.org/#here.
:enabled Element State Pseudo Selectors Matches a user interface element that is enabled.
:disabled Element State Pseudo Selectors Matches a user interface element that is disabled.
:checked Element State Pseudo Selectors Matches a user interface element that is checked.
:empty Structural Pseudo Selectors Matches an element without childeren (neither text nor child elements).
:only-child Structural Pseudo Selectors Matches an element without sibling elements (neither equal or different siblings).
:only-of-type Structural Pseudo Selectors Matches an element without sibling elements of the same type.
:nth-child(odd) Structural Pseudo Selectors Represents every odd row.
:nth-child(even) Structural Pseudo Selectors Represents every even row.

Multiple Classes

You can assign an element to multiple classes:

<p class="small note">

Pseudo Selectors

Pseudo selectors match depending on the current state. They are frequently used to change the behaviour of links when you hover over them.

CSS1 defined Link pseudo-selectors and dynamic pseudo-selectors.

Link Pseudo-Selectors

Selector Matches
a:link Unvisited links
a:visited Visited links


Dynamic Pseudo-Selectors

Selector Matches
a:active The time between a mouse down and a mouse up
a:hover The time when a mouse hover over a link
a:focus The time when an element has the focus (by tabbing through all elements)

Order

You should defined the pseudo-selectors in this order for compatibility with CSS 1:

a:link    { color: #00e; } /* Blue for unvisited links */
a:visited { color: #508; } /* Purple for visited links */
a:hover   { color: #0bb; } /* Green, when the mouse hovers over the link */
a:active  { color: #f00; } /* Red, the moment you click a link */

Focus Surrounding Hovers

You can accomplish interesting effects by combining Descendant and Pseudo-Selectors, even with CSS 1:

CSS:

p:hover a { border: 1px dotted gray; }

HTML:

<p>Lorem ipsum <a href="">dolor</a> sit amet</p>

The link gains a dotted border, even when you hover over the surrounding paragraph, drawing attention to it.

First Child Pseudo-Selectors

Selector Matches
li:first-child Matches only the first <li> in a list of <li>.

First Letter Pseudo-Selectors

Selector Matches
p:first-letter Matches the first letter of a paragraph
p:first-line Matches the text before the first line break of a paragraph

To get a dropped initial letter, and the rest of the line in caps:

P:first-letter { font-size: 200%; font-style: italic;
                 font-weight: bold; float: left }
P:first-line   { text-transform: uppercase }

Before/After Pseudo-Selectors

Selector Matches
a:before Used to insert text before an element
a:after Used to insert text after an element

Example:

p.warning {color: red; font-weight: bold; }
p.warning:before {content: "Warning: "}

h1:before {content: counter(chapter);}

Attribute Selectors

Attribute Selector Equivalent Selector Matches
a[href] N/A Matches <a href="url">, but not <a id="header"...>
input[type=submit] N/A Matches <input type="submit">, but not <input type="text">.
div[id="header"] div#header Matches <div id="header"> (the equivalent relation also matches <div name="#header">)
p[class~=note] p.note Matches <p class="note"> as well as <p class="medium note important">
p[lang|="en" p:lang(en) Matches <p lang="en"> as well as <p xmlns:lang="en-GB">

Advanced example (taken from Lim Chee Aun), where abbreviations with a title attribute will have a hover-effect:

HTML:

<abbr title="Hypertext Markup language">HTML</abbr>

CSS:

abbr[title]:hover:after{ content: " (" attr(title) ")"; }