Scribd
Upload
28 views

W3C CSS Selectors Reference: Selector Example Example Description

This document provides a reference for CSS selectors. It lists different types of selectors including element, class, ID, universal, descendant, child, adjacent sibling, pseudo-class selectors for link, visited, focus, hover and active states. For each selector type it provides a short example and description of what elements would be selected by that selector.

Uploaded by

garth
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
28 views

W3C CSS Selectors Reference: Selector Example Example Description

This document provides a reference for CSS selectors. It lists different types of selectors including element, class, ID, universal, descendant, child, adjacent sibling, pseudo-class selectors for link, visited, focus, hover and active states. For each selector type it provides a short example and description of what elements would be selected by that selector.

Uploaded by

garth
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

W3C CSS Selectors Reference

Source: http://www.w3schools.com/cssref/css_selectors.asp

Selector Example Example description

Type Sectors h1 { margin: 0; } Selects all <h1> elements


element

Multiple Selectors h2,h3,h4 { color: Selects all <h2> <h3> <h4> elements
element,element green; }

Class .nav {padding: 1em Selects all elements with class="nav"


.class 2em; background:
green;}

Div ID #header {padding: Selects the element with id="header"


#id 2em;color: #fff;
background: #000;}

Universal *{margin: 0; Selects all elements


* padding: 0;}

Descendant .nav ul{margin: 0; Selects all <ul> elements inside <.nav>


element element padding: 0;} elements

.nav li {display: Selects all <li> elements inside <.nav>


inline; margin-right: elements
1em;}
Selects all <a> elements inside <li> and
.nav li a { color: #fff; <.nav> elements
}
Child .nav li > a { text- Selects all <a> elements where the
element>element decoration: none; } parent is a <.nav> and <li> element

adjacent sibling h3 + h4 { margin- Selects all <h4> elements that are


element+element top: 2em; } placed immediately after <h3>

:link a:link { color: green; Selects all unvisited links


}

:visited a:visited { color: Selects all visited links


brown; }

:focus a:focus { color: Selects the anchor element which has


black; } focus

:hover a:hover { color: lime; Selects links on mouse over


}

:active a:active { color: red; Selects the active link


}

You might also like