CSS Selectors
CSS selectors are used to "find" or select the HTML elements you want to style.
We can divide CSS selectors into five categories:
- Simple selectors (select elements based on name, id, class)
- Combinator selectors (select elements based on a specific relationship between them)
- Pseudo-class selectors (select elements based on a certain state)
- Pseudo-elements selectors (select and style a part of an element)
- Attribute selectors (select elements based on an attribute or attribute value)
Simple Selectors
The CSS Element Selector
The element selector selects HTML elements based on the element name.
p {
text-align: center;
color: red;
}
The CSS ID Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique element.
#para1 {
text-align: center;
color: red;
}
The CSS Class Selector
The class selector selects HTML elements with a specific class attribute.
.center {
text-align: center;
color: red;
}
You can also specify that only specific HTML elements should be affected by a class.
p.center {
text-align: center;
color: red;
}
In this example, only <p> elements with class="center" will be red and center-aligned.
HTML elements can also refer to more than one class:
This paragraph refers to two classes.
The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
* {
text-align: center;
color: blue;
}
The CSS rule above will affect every HTML element on the page.
The CSS Grouping Selector
The grouping selector selects all the HTML elements with the same style definitions.
It will be better to group the selectors to minimize the code.
To group selectors, separate each selector with a comma.
h1, h2, p {
text-align: center;
color: red;
}
CSS Combinators
A combinator explains the relationship between selectors.
Descendant Selector
The descendant selector matches all elements that are descendants of a specified element.
div p {
background-color: yellow;
}
Child Selector
The child selector selects all elements that are the children of a specified element.
div > p {
background-color: yellow;
}
Adjacent Sibling Selector
The adjacent sibling selector is used to select an element that is directly after another specific element.
div + p {
background-color: yellow;
}
General Sibling Selector
The general sibling selector selects all elements that are next siblings of a specified element.
div ~ p {
background-color: yellow;
}
CSS Pseudo-classes
A pseudo-class is used to define a special state of an element. It is added to the selector for adding an effect to the existing elements based on their states.
:first-child Pseudo-class
The :first-child pseudo-class matches a specified element that is the first child of another element.
p:first-child {
color: blue;
}
Match the first <i> element in all <p> elements.
p i:first-child {
color: blue;
}
Match all <i> elements in all first child <p> elements.
p:first-child i {
color: blue;
}
:last-child Selector
The :last-child selector matches every element that is the last child of its parent.
p:last-child {
background: #ff0000;
}
It specifies the background color for the <p> element that is the last child.
CSS Pseudo-elements
A CSS pseudo-element is used to style specified parts of an element.
It can be used to style the first letter or line of an element and insert content before or after the content of an element.
::first-line Pseudo-element
The ::first-line pseudo-element is used to add a special style to the first line of text.
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
Note: The ::first-line pseudo-element can only be applied to block-level elements.
::first-letter Pseudo-element
The ::first-letter pseudo-element is used to add a special style to the first letter of text.
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
Note: The ::first-letter pseudo-element can only be applied to block-level elements.
Pseudo-elements and HTML Classes
Pseudo-elements can be combined with HTML classes.
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
Multiple Pseudo-elements
Several pseudo-elements can also be combined.
In the following example, the first letter of a paragraph will be red, in an xx-large font size. The rest of the first line will be blue and in small-caps. The rest of the paragraph will be the default font size and color.
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
::before Pseudo-element
The ::before pseudo-element can be used to insert some content before the content of an element.
h1::before {
content: url(smiley.gif);
}
::after Pseudo-element
The ::after pseudo-element can be used to insert some content after the content of an element.
h1::after {
content: url(smiley.gif);
}
::marker Pseudo-element
The ::marker pseudo-element selects the markers of list items.
::marker {
color: red;
font-size: 23px;
}
::selection Pseudo-element
The ::selection pseudo-element matches the portion of an element that is selected by a user.
The following CSS properties can be applied to ::selection: color, background, cursor, and outline.
::selection {
color: red;
background: yellow;
}
CSS Attribute Selectors
Style HTML elements with specific attributes.
[attribute] Selector
The [attribute] selector is used to select elements with a specified attribute.
a[target] {
background-color: yellow;
}
[attribute="value"] Selector
The [attribute="value"] selector is used to select elements with a specified attribute and value.
a[target="_blank"] {
background-color: yellow;
}
[attribute~="value"] Selector
The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word.
[title~="flower"] {
border: 5px solid yellow;
}
The example above will match elements with title="flower," title="summer flower," and title="flower new," but not title="my-flower" or title="flowers."
[attribute|="value"] Selector
The [attribute|="value"] selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-).
Note: The value has to be a whole word, either alone, like class="top," or followed by a hyphen (-), like class="top-text."
[class|="top"] {
background: yellow;
}
[attribute^="value"] Selector
The [attribute^="value"] selector is used to select elements with the specified attribute, whose value starts with the specified value.
Note: The value does not have to be a whole word!
[class^="top"] {
background: yellow;
}
This selects all elements with a class attribute value that starts with "top."
[attribute$="value"] Selector
The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value.
Note: The value does not have to be a whole word!
[class$="test"] {
background: yellow;
}
This selects all elements with a class attribute value that ends with "test."
[attribute*="value"] Selector
The [attribute*="value"] selector is used to select elements whose attribute value contains a specified value.
Note: The value does not have to be a whole word!
[class*="te"] {
background: yellow;
}
This selects all elements with a class attribute value that contains "te."