CSS Selectors are used to select HTML element(s) on which we want to apply CSS rules on. With the help of CSS Selectors, we tend to select a specific HTML element or select by grouping multiple HTML elements.
CSS Selectors can be divided into the following categories based on the type of element that they can select -
Universal Selector
Universal Selector (*) is used to select all the elements.
Universal Selector is also a special type selector (selector matches element by node name) and can be namespaced with the help of @namespace. This is generally used when dealing with documents that contain multiple namespaces.
Syntax
* {
color: blue;
}
Example
Individual Selector
Individual Selectors are used to select a specific HTML tag on which we need to apply style. We can select any element with the help of individual selector. It is the most basic and widely used selector.
Syntax
/* All <p> elements are selected */
p {
Style properties
}
Example
Class Selector
Class Selector selects all elements which matches the class attribute. If the attribute is given as class = "heading" in any HTML element, then with the help this syntax (given below) we can select all the HTML elements having the same class name and change the font colour to purple.
Syntax
.heading {
color: purple;
}
Example
ID Selector
ID Selector selects an element as per the value of its id attribute. In a HTML document, there should be only unique value of an id attribute.
No two HTML elements should have same value in id attribute.
If the attribute is given as id = "paragraph" in any HTML element, then with the help this syntax (given below) we can select the HTML element having the same id and change the font colour to blue.
Syntax
#paragraph{
color: blue;
}
Example
Chained Selector
Chained Selector can be used in multiple ways, here I'm dicussing the most common way of using it by chaining one class name with the other with the help of .. If an element have two class name i.e. classic1 and classic2 then with the help of . between both name with can select that specific element with both class name.
Syntax
.classic1.classic2 {
color: pink;
}
Example
Combinators
Here we're going to learn about Combinators, which basically help to combine two or more selectors. There are many ways to combine two or more selectors which are -
- Descendent Combinator
- Child Combinator
- Adjacent Sibling Combinator
- General Sibling Combinator
Let's learn about every combinator one by one.
Descendent Combinator
A descendant Combinator is used to select all the descendants of an immediate ancestor. It is represented by a single space " " between the two selectors.
let's take a case where you want to change the text color of all the paragraphs inside a div. So what we can do is to select them, we need to write div p.
Syntax
FirstSelector SecondSelector {
Style properties
}
Example
Child Combinator
A Child Combinator is referred to by >. We insert a child combinator in between two selectors so that we can change the style of the second selector, only if the second selector is a direct child of the first one.
For example, if you want to select the span which is a direct child of h1, and keep another span unchanged. We can just write h1>span.
Syntax
FirstSelector > SecondSelector {
Style properties
}
Example
Adjacent Sibling Combinator
Adjacent Sibling Combinator can be denoted by +. As the name suggests, it helps to select the element of the second selector only if the second selector is adjacent to the first one.
For example, if we want to style all the p tags after the h1 tag, we can use an adjacent sibling combinator. It will only select all the paragraphs which are exactly after the h1 tag.
Syntax
FirstSelector + SecondSelector {
Style properties
}
Example
General Sibling Combinator
General Sibling Combinator helps to select the sibling of an element even if they are not adjacent, but the siblings must be below in the hierarchy.
It can e denoted by ~.
For example, if we need to select all the paragraphs under the h1 tag, then we can simply write h1~p.
Syntax
FirstSelector ~ SecondSelector {
Style properties
}
Example
Pseudo Elements
We can often get confuse between Pseudo Classes and Pseudo Elements. Pseudo Classes are the selector which selects elements when it is in a specific state.
Whereas, Pseudo Elements enable to add a whole new HTML element into the markup.
It is applied with a double semicolon::.
There are two special types of pseudo-elements, which are:
::after::before
They are special because they are used along with the content property.
The content property helps to add content either after the selected element or before as per the pseudo-element used.
For example, if we can't access the HTML document but can only access the CSS document, then with the help of ::before element we can add content before the selected element.
Note - Add content directly through CSS is not advisable, it generates an accessibility issue with the screen reader.
For another example, we can enter a dummy string in the content, and then we can enter the height and width along with display: block, so that we can style it like an element.
Syntax
SelectorName::pseudo-elements{
Style properties
}
Example
You've come a long way and learned about CSS Selectors in depth.
I just want to say that -