CSS selectors with details example
Recently, I was doing a project and for a reason, my CSS class selector wasn’t working as it should be which put me in a confusing situation because I was pretty sure that was right, but it’s not working🤷♂️. So, I had to spend quite some time checking several articles, documents, and the solution was to clear the browser cache!! I should have thought of that before 😶. Well, I’m not sure why? But anyway it solved my problem👦.
So, that trigger me to write this post as a reference for myself. Hopefully, this helps you as well in any way.
The following is a list of the most common and well-supported CSS selectors. There are may/many more, but these are the ones we should know well.
- Element Type Selectors
- Id Selectors
- Class selectors
- Descendant Selectors
- Child Selectors
- Adjacent sibling selectors
- Grouping Selectors
- Universal Selectors
Element Type Selectors
The most basic CSS selectors are Element Type Selectors. An element type selector matches all instance of the element in the document with the corresponding element type name. We’ve used this selector extensively already.
Example:
style.css
h1{
color: red;
}index.html
<h1>This is heading h1</h1>
<h2>This is heading h2</h2>
<p>Just a paragraph of few words.</p>
<h1>This is heading h1</h1>
<div>
<h1>This is heading h1 inside of `div`</h1>
</div>Output :
The style rules inside the h1 selector will be applied on every <h1> element in the document and color it red, regardless of their position in the document tree (That is in any position of your web pages/project).
Id Selectors
The id of an element is unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
Note: The value of an id attribute must be unique within a given document meaning no two elements in your HTML document can share the same id value.
Example — 1:
style.css
#id1{
color: red;
}#id2{
color: green;
}
index.html
<div id="id1">
<h1>`#id1` - This is heading h1</h1>
<h2>`#id1` - This is heading h2</h2>
<p>`#id1` - Just a paragraph of few words.</p>
<div>
<h1>`#id1` - This is heading h1 inside of `div`</h1>
</div>
</div><hr><div id="id2">
<h1>`#id2` - This is heading h1</h1>
<h2>`#id2` - This is heading h2</h2>
<p>`#id2` - Just a paragraph of few words.</p>
<div>
<h1>`#id2` - This is heading h1 inside of `div`</h1>
</div>
</div>
Output:
Example —2:
style.css
h1#id1{
color: red;
}index.html
<div>
<h1>heading h1 `no` color change.</h1>
<h1 id="id1">heading h1 color changed to red.</h1>
</div>Output:
In this example the content is red for only <h1> elements with id attribute set to ‘‘#id1’’.
Example — 3:
style.css
#id1 h1{
color: red;
}index.html
<div id="id1">
<h1>`#id1` - This is heading h1</h1>
<h2>`#id1` - This is heading h2</h2>
<p>`#id1` - Just a paragraph of few words.</p>
<div>
<h1>`#id1` - This is heading h1 inside of `div`</h1>
</div>
</div><hr><div id="id2">
<h1>`#id2` - This is heading h1</h1>
<h2>`#id2` - This is heading h2</h2>
<p>`#id2` - Just a paragraph of few words.</p>
<div>
<h1>`#id2` - This is heading h1 inside of `div`</h1>
</div>
</div>
Output:
In this example all h1 headings will be displayed in red color when those headings will lie with in tags having id attribute set to “#id1”.
Class Selectors
You can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule.
To select elements with a specific class, write a period (.) character, followed by the class name.
Example — 1:
style.css
.firstDiv{
background-color: royalblue;
text-align: center;
}index.html
<div class="firstDiv">
<h1>This is heading h1</h1>
<h2>This is heading h2</h2>
<p>Just a paragraph of few words.</p>
<div>
<h1>This is heading h1 inside of `div`</h1>
</div>
</div><hr><div class="secondDiv">
<h1>This is heading h1</h1>
<h2>This is heading h2</h2>
<p>Just a paragraph of few words.</p>
<div>
<h1>This is heading h1 inside of `div`</h1>
</div>
</div>
Output:
Example — 2:
style.css
.firstDiv{
background-color: royalblue;
text-align: center;
}h1.divHeader{
color: rgb(0, 255, 42);
}
index.html
<div class="firstDiv">
<h1 class="divHeader">This is heading h1 with `divHeader` class of first `div`</h1>
<h1>This is heading h1 without `divHeader` class to it</h1>
<div>
<h1 class="divHeader">This is heading h1 inside of first `div`</h1>
</div>
</div><hr><div class="secondtDiv">
<h1 class="divHeader">This is heading h1 with `divHeader` class of second `div`</h1>
</div>
Output:
In this example only <h1> element text color with class “divHeader” will be green in the whole document tree.
Descendant Selectors
In Descendant Selectors, match an element that is a descendant of another element. This uses two separate selectors, separated by a space.
You can use these selectors when you need to select an element that is the descendant of another element, for example, if you want to target only those anchors that are contained within an unordered list, rather than targeting all anchor elements.
Example:
style.css
h1 em {
color: green;
}
ul.menu {
padding: 0;
list-style: none;
}
ul.menu li{
display: inline;
}
ul.menu li a {
margin: 10px;
text-decoration: none;
color: orange;
}index.html
<h1>This is a <em>heading</em></h1>
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>Output:
Here the style rules inside the selector ul.menu li a applied to only those <a> elements that contained inside an <ul> element having the class .menu, and has no effect on other links inside the document.
Similarly, the style rules inside the h1 em selector will be applied to only those <em> elements that contained inside the <h1> element and has not effect on other <em> elements.
Child Selectors
A child selector is used to select only those elements that are the direct children of some element.
A child selector is made up of two or more selectors separated by a greater than symbol (>). You can use this selector, for instance, to select the first level of list elements inside a nested list that has more than one level.
Example:
style.css
ul > li {
background-color: green;
}
ul > li ol {
background-color: yellow;
}index.html
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Services</a>
<ol>
<li><a href="#">Design</a></li>
<li><a href="#">Development</a></li>
</ol>
</li>
<li><a href="#">Contact</a></li>
</ul>Output:
The style rule inside the selector ul > li applied to only those <li> elements that are direct children of the <ul> elements, and has no effect on other list elements.
Adjacent Sibling Selectors
The adjacent sibling selectors can be used to select sibling elements (i.e. elements at the same level). This selector has the syntax like: E1 + E2, where E2 is the target of the selector.
The selector h1 + p in the following example will select the <p> elements only if both the <h1> and <p> elements share the same parent in the document tree and <h1> is immediately precedes the <p> element. That means only those paragraphs that come immediately after each <h1> heading will have the associated style rules. Let’s see how this selector actually works:
Example:
style.css
h1 + p {
color: blue;
font-size: 18px;
}ul.task + p {
color: #f0f;
letter-spacing: 3px;
}
index.html
<h1>This is a heading h1</h1>
<p>This is a paragraph which immediately after `h1`.</p>
<p>This is another paragraph which is not immediately after `h1`.</p><hr><p>This is a paragraph(1).</p>
<ul class="task">
<li>Task 1</li>
<li>Task 2</li>
<li>Task 3</li>
</ul>
<p>This is one more paragraph(2) with letter spacing 3px.</p>
<p>This is also a paragraph(3).</p>
Output:
General Sibling Selectors
The general sibling selector is similar to the adjacent sibling selector (E1 + E2), but it is less strict. A general sibling selector is made up of two simple selectors separated by the tilde (∼) character. It can be written like: E1 ∼ E2, where E2 is the target of the selector.
The selector h1 ∼ p in the example below will select all the <p> elements that preceded by the <h1> element, where all the elements share the same parent in the document tree.
Example:
style.css
h1 ~ p {
color: blue;
font-size: 18px;
}ul.task ~ p {
color: #f0f;
letter-spacing: 3px;
}
index.html
<h1>This is a heading h1</h1>
<p>This is a paragraph(1).</p>
<p>This is another paragraph(2).</p>
<div>
<p>This is a paragraph(3) inside `div`.</p>
</div><hr><p>This is a paragraph(4).</p><ul class="task">
<li>Task 1</li>
<li>Task 2</li>
<li>Task 3</li>
</ul>
<p>This is one more paragraph(5) with letter spacing 3px.</p>
<p>This is also a paragraph(6) with also letter spacing 3px.</p>
Output:
Grouping Selectors
The grouping selector is used to select all the elements with the same style definitions. Grouping selector is used to minimize the code. It also prevents you from repeating the same style rules over and over again. Commas are used to separate each selector in grouping.
Before Grouping Selectors:
h1 {
letter-spacing: 3px;
font-weight: 300;
font-size: smaller;
color: orangered;
}
h2 {
letter-spacing: 3px;
font-weight: 300;
font-size: smaller;
color: orangered;
}
p {
letter-spacing: 3px;
font-weight: 300;
font-size: smaller;
color: orangered;
}
a {
letter-spacing: 3px;
font-weight: 300;
font-size: smaller;
color: orangered;
}After Grouping Selectors:
h1, h2, p, a {
letter-spacing: 3px;
font-weight: 300;
font-size: smaller;
color: orangered;
}index.html
<h1>This is a heading h1</h1>
<p>This is a paragraph(1).</p>
<div>
<p>This is a paragraph(2) inside `div`.</p>
</div><hr><h2>This is a heading h2</h2>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
</ul>
<p>This is a paragraph(3).</p>
Output:
Universal Selector
The universal selector (*) selects all HTML elements on the page.
For example, if we wanted every element to have a solid 1px wide border, we would use the following CSS rule:
* {
border: 1px solid blue;
}You should be careful with universal selectors. When might you want to use them? The answer is, not often. But an example would be to set the margins and padding for all elements on the page to zero.
* {
margin: 0;
padding: 0;
}Example:
style.css
* {
border: 1px solid blue;
}body{
padding: 0px 100px;
}
index.html
<h1>This is a heading h1</h1>
<p>This is a paragraph(1).</p>
<div>
<p>This is a paragraph(2) inside `div`.</p>
</div>Output:
