CSS Selectors
Before we start talking about the different types of selectors, we need to understand what they are, and why do we even need them.
CSS is a language that dictates how elements will be rendered in the browser, for us to connect between the rendering declarations (all the CSS properties) and each element in the DOM tree, we use CSS selectors.
Selectors are patterns that the browser matches against elements in the DOM tree and looks for a node element or a set of node elements matching that pattern, selects them (hence the name selectors), and defines their rendering, or in simple words, defines their appearance on the browser screen.
Selector Structure
- A Selector is a pattern of elements in the DOM tree. It refers to the simple selector, compound selector, complex selector, or a selector list. When we create a selector we create a condition, then the browser is looking for an element that meets that condition and selects it.
- The Subject of a Selector is the element that meets all the conditions of the selector, from the DOM tree. An element matches a selector only if the Selector accurately describes that element. Two elements match a combinator when the condition of the relationship between them is met.
- A Simple Selector is a single pattern on an element. It refers to type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-selectors.
- A Compound Selector is a set of simple selectors that are not separated by a combinator, and create a "list" of conditions to an element.
- A Combinator is a condition, like a selector, but it checks the relationship between two elements and not the element itself. It refers to the descendant combinator ( ), the child combinator ( > ), the next-sibling combinator ( + ) and the subsequent-sibling combinator ( ~ ).
- A Complex Selector is a set of compound selectors separated by combinators. This selector creates a set of conditions on a set of elements.
- A Selector List is a list of selectors that separated by a comma, they have no connection between each other, other than sharing the same properties.
Selector Types
In this article I will go over the simple selectors CSS has to offer, pseudo-class also considered simple selectors, but because of their importance, I will write about them in their own article and exclude them from this one.
We can divide the selectors to Elemental Selectors and Attribute Selectors.
Elemental Selectors
Elemental selectors are the type selector and the universal selector, they are looking at the element type of an element.
Type Selector
Type selectors, often called tag name or element selectors, are the most basic selector type. The selector looks for at least one instance of that element in the DOM tree.
/* ---------- Selector Syntax ---------- */
Element {
property: value;
}
/* ---------- Selector Examples ---------- */
/* Targets all <h3> HTML elements */
h3 {
property: value;
}
/* Targets all <span> HTML elements */
span {
property: value;
}
Universal Selector
The universal selector, written with an asterisk ( * ) matches an element of any type.
The only elements that it can't select are the featureless elements, i.e. the ::before and ::after pseudo-elements are not affected by the universal selector.
/* ---------- Selector Syntax ---------- */
* {
property: value;
}
/* ---------- Selector Examples ---------- */
/* Targers all elements that are the descendants
of a <div> element */
div * {
property: value;
}
/* Targers all <span> elements that are the descendants
of any element */
* span {
property: value;
}
Attribute Selectors
If an element has an attribute, we can use it to select the element. Using the attribute itself with the attribute presence and value selectors, or by looking at the value with substring matching attribute selectors.
Attribute Presence and Value Selectors
These selectors are matching against the attributes and the values in them.
- Matching the element with the specified attribute, no matter the value.
/* ---------- Selector Syntax ---------- */
Element[attribute] {
property: value;
}
/* ---------- Selector Examples ---------- */
/* Targets all <input> elements that have a
"placeholder" attribute */
input[placeholder] {
property: value;
}
- Matching the element with the specified attribute with exactly the specified value.
/* ---------- Selector Syntax ---------- */
Element[attribute="value"] {
property: value;
}
/* ---------- Selector Examples ---------- */
/* Targets all <a> elements with the attribute "target"
with exactly the value "_top" */
a[target="_top"] {
property: value;
}
- Matching the element with the specified attribute, that it values is a list of strings separated by whitespace, and the specified value is one of them.
/* ---------- Selector Syntax ---------- */
Element[attribute~="value"] {
property: value;
}
/* ---------- Selector Examples ---------- */
/* Targets <input> elements with the attribute
"class" that has the value "must" in it */
input[class~="must"] {
property: value;
}
- Matches the element with the specified attribute, that it values is exactly the specified value or beginning with the specified value and immediately followed by ( - ).
/* ---------- Selector Syntax ---------- */
Element[attribute|="value"] {
property: value;
}
/* ---------- Selector Examples ---------- */
/* Targets <a> elements with the attribute
"hreflang" that the value is "en" or starts with "en-" */
a[hreflang|="en"] {
property: value;
}
Substring Matching Attribute Selectors
These selectors are matching a substring of the values in the attributes.
- Matching an element with the specified attribute, that it's value begins with the specified value.
/* ---------- Selector Syntax ---------- */
Element[attribute^="value"] {
property: value;
}
/* ---------- Selector Examples ---------- */
/* Targets all <a> elements with the "class" attribute
with a value starting with "foo" */
a[class^="foo"] {
property: value;
}
- Matching an element with the specified attribute, that it's value ends with the specified value.
/* ---------- Selector Syntax ---------- */
Element[attribute$="value"] {
property: value;
}
/* ---------- Selector Examples ---------- */
/* Targets <a> elements with the "href" attribute
with the value ending with ".com" */
a[href$=".com"] {
font-family: sans-serif;
}
- Matching an element with the specified attribute, that has at least one instance of the specified value, in the attribute's value.
/* ---------- Selector Syntax ---------- */
Element[attribute$="value"] {
property: value;
}
/* ---------- Selector Examples ---------- */
/* Targets <a> elements with the "href" attribute
with at least one instance of "%20" string */
a[href*="%20"] {
property: value;
}
Class Selector
The class selector is actually a special attribute selector. Because of its common use, it has a unique syntax.
We create a class attribute selector with the dot notation ( . ), immediately followed by the value of the class attribute in the element.
/* ---------- Selector Syntax ---------- */
.class_name {
property: value;
}
/* This syntax is equivalent to the first one */
Element[class~=class_name] {
property: value;
}
/* ---------- Selector Examples ---------- */
/* Targets all the elements with the class "red-text"
.red-text{
property: value;
}
/* Targets only the elements that have both "left"
and "small" classes */
.left.small {
property: value;
}
ID Selector
The ID selector, like the class selector, is actually a special attribute selector and it has a unique syntax, we create an ID selector using the number sign ( # ), immediately followed by the id name.
The id selector has a special feature that it can be only once in a single document, no matter the element type, for example, we can't write the same id name to a span and an h3 element on the same document.
/* ---------- Selector Syntax ---------- */
#id_name {
property: value;
}
/* This syntax is equivalent to the first one */
Element[id~=id_name] {
property: value;
}
/* ---------- Selector Examples ---------- */
/* Targets the element that has "red-error-text"
value in it's ID attribute */
#red-error-text {
property: value;
}
Combinators
As part of the Selector structure, we use combinators to build more complex Selectors and have more control over how we select elements from the DOM, by using combinators we can create selectors that match nested elements that may have no specified attribute, like an id or class attributes.
Descendant Combinator ( )
If we want to select a descendant of an element, we can use the Descendant Combinator, this combinator will help us match elements having to create them a specified id or class attribute.
The Descendant Combinator is whitespace " " that separates two compound selectors.
/* ---------- Selector Syntax ---------- */
Element_selector1 Element_selector2 {
property: value;
}
/* ---------- Selector Examples ---------- */
/* Targets <li> elements that are the descendants of
the .nav-bar element */
.nav-bar li {
property: value;
}
/* Targets <span> elements with the class "important"
which are the descendants of <p> elements which are
the descendsnts of <div> elements which are the
descendants of <section> element */
section div p span.important {
property: value;
}
Child Combinator ( > )
If we want to select the direct children without the descendants of an element we can use the Child Combinator. The Child Combinator is the "greater-than sign" ( > ) character that separates two compound selectors.
/* ---------- Selector Syntax ---------- */
Element_selector1 > Element_selector2 {
property: value;
}
/* ---------- Selector Examples ---------- */
/* Targets <div> elements that are the direct children
of the <section> element */
section > div {
property: value;
}
Next-Sibling Combinator ( + )
If we want to select an element that is immediately following some other element, we can use the Next-sibling combinator.
The elements must share the same parent, and the first element in the selector has to be immediately before the second one.
The next-sibling combinator is the "plus sign" ( + ) character that separates two compound selectors.
/* ---------- Selector Syntax ---------- */
Element_selector1 + Element_selector2 {
property: value;
}
/* ---------- Selector Examples ---------- */
/* Targets the <p> element that comes right after
<figure> element inside the <div> element */
div figure + p {
property: value;
}
Subsequent-Sibling Combinator ( ~ )
The subsequent-sibling combinator is the "Tilda" ( ~ ) character that separates two compound selectors.
The selector is represented by two sequences of simple selectors separated by the subsequent-sibling combinator, and they both share the same parent element, and unlike the next-sibling combinator, the second element doesn't have to come immediately after the first element.
/* ---------- Selector Syntax ---------- */
Element_selector1 + Element_selector2 {
property: value;
}
/* ---------- Selector Examples ---------- */
/* Targets the <p> element that comes not necasseraly
immideatelly after <figure> element inside the
<div> element */
div figure ~ p {
property: value;
}
Column Combinator ( || )
The column combinator is written by two pipes ( || ) selects the elements of a column element by looking at the relationship between it and the column it belongs to.
THIS COMBINATOR IS STILL ONLY AT THE EXPERIMENTAL STAGE AND MAY NOT WORK.
/* ---------- Selector Syntax ---------- */
column_selector || cell_selector {
property: value;
}
/* ---------- Selector Examples ---------- */
/* Targets the <td> elements that belong to
<col> element with the class "blue-cell" */
col.blue-cell || td {
property: value;
}
This concludes my Basic Selectors article, all the pseudo-selectors will be explained in the next article.
Hope you enjoyed and leave a comment so I can improve and learn more!
Thanks for reading!
Top comments (2)
A good overview of selectors that are the basis for learning CSS. Just an observation, I believe you forgot to change '.' by '#' in the syntax example in ID Selector. Thank you anyway!
Thank you!
I have fixed that, it sure was a typo by me :D