CSS: Selector Tutorial
Most Common CSS Tag-Matching Patterns
/* most common examples of CSS selector syntax */ /* match any p tag */ p { color:red} /* match p tag that have class="xyz" */ p.xyz { color:red} /* match any tag that have class="xyz" */ .xyz { color:red} /* match the tag that has id="xyz". Note, id must be unique per html page */ #xyz { color:red} /* match p that's direct child of div */ div > p { color:red} /* match p that's nested in div however deep */ div p { color:red} /* match span tags that have class="booktitle" */ span.booktitle { color:red}
The tag matcher is often just the tag's name, but it can also be
specified for tags that have a particular class
attribute, or tags
with a particular id
attribute, and more.
For example, if you have <p class="warning">…</p>
for any important paragraph, you
can make all such paragraph red by p.warning {color:red}
.
CSS is really simple. 90% of CSS can be mastered in just a day. Complete mastery of CSS will usually take a year or more of experience.
The following are most common patterns in using CSS. You should memorize them by heart.
Match Tag Names
Some common examples of setting appearance for HTML elements.
body {font-family:sans-serif} p {line-height:1.5} blockquote {color:navy} img {margin:1px}
Match Class Value
/* matches any tag of class xyz */ .xyz {color:red}
<div class="xyz">abc</div>
Note: a HTML element can have more than one class. 〔see HTML: Class Attribute〕
Match Tag Name and Class Value
/* matches any div of class xyz */ div.xyz {color:red}
<div class="xyz">…</div>
Match a Tag's ID
/* matches any tag with id of xyz */ #xyz {color:red}
<div id="xyz"></div> <span id="xyz"></span> <p id="xyz"></p>
Change Link Appearance
Example of removing the underline in links.
a:link {text-decoration:none} a:visited {text-decoration:none}
Match Multiple Tags
If you have multiple tags and want them all to have the same appearance, you can use comma.
For example, this:
span.x, span.y, span.z {color:red}
is equivalent to:
span.x {color:red} span.y {color:red} span.z {color:red}
Match Nested Tags (all levels)
Sometimes, you want to match a tag only if it is nested inside another tag (regardless how many levels deep). You can use the space to specify this, like this:
/* match any span with class xyz, nested at any depth inside a span with class xyz */ div.abc span.xyz {color:red}
<div class="abc">a <div class="xyz">b</div> c</div>
Match Parent Child Relation
Sometimes you want to match a tag only if it is a immediate child of a given parent tag.
You can use the >
to specify a parent-child relationship.
Here is a example:
div > span {color:red}