HTML and CSS Reference
In-Depth Information
Selector
Description
Example
Defined In
Selects all elements of
the name E specified
in the rule
CSS1
E
h1 {color: red;}
/* makes all h1 tags red */
Selects all elements
CSS2
*
* {color: blue;}
/* makes all elements blue */
Applies the same rules
to a group of tags E, F,
and G
CSS1
E, F, G
h1,h2,h3 {background-color: orange;}
/* sets the background color of all
h1, h2, and h3 elements to orange */
Selects any tag with an
id
attribute set
CSS1
#id
#test {color: green;}
/* makes a tag with id='test' green */
Selects the specified
element E with the
given
id
attribute set
CSS1
E#id
h3#contact{color: red;}
/* sets the color to red on the h3
tag with the id equal to contact */
Selects all tags with
the specified class
value
CSS1
.class
.note {color: yellow;}
/* makes all tags with class='note'
yellow */
E.class
Selects the specified
elements of type E
with a particular class
value
h1.note {text-decoration: underline;}
/* underlines all h1 tags with
class='note' */
CSS1
E F
Selects descendent
tags where F is an
eventual descendent
of element E
p strong {color: purple;}
/* sets all strong tags that are
descendents of p tags purple */
CSS1
Selects direct
descendents
CSS2
E > F
body > p {background-color: yellow;}
/* makes all p tags that have the
body tag as their immediate parent
have the background color yellow */
Selects adjacent
siblings
CSS2
E + F
h1 + p {color: red;}
/* makes all p tags that are
immediately preceded by an h1 tag
red */
E ~ F
Selects siblings
p ~ strong {font-style: italic;}
/* sets the font style to italic on
all strong tags that have a p tag
as a preceding sibling */
CSS3
T
ABLE
4-6
Core CSS Selectors
