Cascading Style Sheets (CSS) is a W3C standard that specifies how HTML and XML elements are displayed on the screen. It's a declarative language where visual properties are applied to tag selectors. You can use CSS to apply properties such as colors, fonts, margins, shadows, and gradients to one or more tags, perform coordinate transformations in two and three dimensions, and set rules for transitions and animations. CSS properties and selectors are also used in JavaScript libraries, such as JQuery and D3.js.
CSS selectors are expressions used to select elements by type, class, ID, wildcards, attributes, context, state, and position. The result of a selection expression may consist of none, one, or more elements. JavaScript libraries use selectors to obtain objects that can be manipulated programmatically via DOM. A result set can be formed from a list of comma-separated selection expressions. Elements may also be selected from context with combinator selectors. The following table lists some of the main selectors and some examples:
|
Selector |
Syntax |
Description Example (in CSS) |
|
Type selector |
tagname |
Selects a set of elements of the specified type (tag name), for example td, h1, prect { … } /* all <rect> tags */. |
|
Class selector |
.classname |
Selects a set of elements that belongs to a specified class, for example .selected and p.copy. |
|
ID selector |
#idname |
Selects one element with the specified id attribute, for example #main and #chart. |
|
Universal selector |
* |
Selects all elements. |
|
Attribute selector |
[attr] (several other combinations) |
Selects elements that contain an attribute. Selects elements that contain an attribute with a specified value. Other combinations match a string in the attribute value. |
|
Descendant combinator |
ancestor selectedtag |
Selects elements nested within a specified ancestor element (may have other elements in between), for example table td. |
|
Child |
parent > selectedtag |
Selects elements nested directly below a specified parent element (selectedTag is a child of a parent), for example table >tbody >tr >td. |
|
General sibling combinator |
preceding ~ selectedtag |
Selects elements that appear after a specified predecessor (both have the same parent), for example h1 ~p.last. |
|
Adjacent sibling combinator |
previous + selectedtag |
Selects elements that appear directly after a specified sibling (both have the same parent), for example h1 +p.first. |
|
Pseudo-classes |
tag:state |
Selects elements that are in a specified state, for example a:hover, p:last-child, td:nth-of-type(2), :not(x). |
|
Pseudo-elements |
tag::property |
Selects elements with a specified property, and is rarely used. |
Most of the time, you will use the simplest selectors. The ID, class, and type selectors are the most common. Eventually, you might use descendant combinators or attribute selectors.
The following code uses simple selectors to change the visual appearance of an unformatted page containing three sections. The sections are stacked one on top of the other. The CSS properties and other parts were omitted, but you can see them in the full code listing (Examples/example-5-selectors.html):
<html lang="en">
<head>
<style>
h1 {…}
.tab h1 {…}
.tab p {…}
.illustration {…}
.tab {…}
.tab .contents {…}
.container {…}
.tab:nth-child(2) h1 {…}
.tab:nth-child(3) h1 {…}
</style>
</head>
<body>
<h1>CSS and JQuery selectors</h1>
<div id="container">
<div class="tab first" id="section1">
<div class="contents">
<img class="illustration" src="jupiter.jpg" />
<p>…</p>
</div>
<h1>Tab 1: Jupiter</h1>
</div>
<div class="tab" id="section2">
<div class="contents">
<img class="illustration" src="saturn.jpg" />
<p>…</p>
</div>
<h1>Tab 2: Saturn</h1>
</div>
<div class="tab" id="section3">
<div class="contents">
<img class="illustration" src="pluto.jpg" />
<p>…</p>
</div>
<h1>Tab 3: Pluto</h1>
</div>
</div>
</body>
</html>
The result is as follows:
