CSS selectors are used to declare which of the markup elements a style applies to, a kind of match expression. Selectors may apply to all elements of a specific type, or only those elements that match a certain attribute; elements may be matched depending on how they are placed relative to each other in the markup code, or on how they are nested within the document object model.
Common selectors are the id selectors which use a hash sign to indicate the id, class selectors which use a period to indicate the class, and type selectors which use the node name of an element to indicate the type. There are also Universal CSS Selectors.
Pseudo-classes and pseudo-elements are also CSS selectors.
Examples:
- ID selectors...
<style type="text/css">
#id {
color:red;
}
p#1 {
color:blue;
}
</style>
</head>
<body>
<span id="id">Red text.</span>
<p id="1">Blue text.</p>
- Class selectors...
<style type="text/css">
.class {
color:green;
}
p.1 {
color:yellow;
}
.2 {
background-color:black;
}
</style>
</head>
<body>
<span class="class 2">Green text on black bg.</span>
<p class="1">Yellow text.</p>
<span class="2">Text on black bg.</span>
<span class="class">Green text.</span>
- Type selectors...
<style type="text/css">
p {
color:red;
}
span,
div {
color:green;
}
</style>
</head>
<body>
<p>Red text.</p>
<span>Green text.</span>
<div>Green text.</div>