As a web developer you are definitely going to need the CSS selectors to style various elements on your website. CSS selectors when used correctly can save a lot of your work and make things easier for you. In this article I have mentioned basic CSS selectors that every web developer should know.Want to know what are the basic CSS selectors and how to use them let us explore:
What is a selector in CSS?
CSS selectors are used to define the elements to which particular CSS rules are applied.
1. Element Selector. (eg: p, h1, div).
It is used to select an element directly to style it as:
p{
color: red;
}
This causes all the paragraphs in the web page to have a text color of red.
2.Class Selector. (.).
It is used to set a specific CSS rule set to a particular group of elements. Consider the markup given below.
<p class="green">Hello World!</p>
<p class="green">I am just learning to code </p>
<p class="green">Learning By Doing</p>
<p>Bye</p>
In this markup we created four p tags and added class to three of them. Inside CSS the class is referenced by adding dot(.) before the class name. Now lets try to style them.
.green{
color: green;
}
This causes the first three paragraph tags to have green color as the class is applied only to first three p tags.
3. Id Selector (#).
The id selector is used to style any particular element on the web page. Two elements in html can have same class but can not have same id as id is unique to an element.Inside CSS id is referenced by adding # before the id name. consider the markup as:
<p id="red-text">Hello Jack</p>
<p>How are you?</p>
We have set an id on the first paragraph. Now let us use the id in CSS.
#red-text{
color: red;
}
This CSS rule will cause the first p tag to have text color red.
4.Universal Selector (*) .
The universal selector is used to target every element on the web page as:
*{
font-family: 'Roboto Mono'
}
This causes all the elements on the page to have a font-family of 'Roboto Mono'. The universal selector can also be used to select the child elements as:
<div class="parent">
<p>Hello Jim </p>
<ul>
<li>First Item</li>
<li>Second Item </li>
</ul>
</div>
and we apply the styling as:
.parent * {
padding: 20px;
}
This will select all the elements that are within the class parent and apply a padding of 20px on all of them.
5.Group Selector(,).
This selector is used to select more than one elements to have the same style. Suppose we want all the div tags, span tags and section tags on our web page to have a margin of 10px. Instead of writing the style for each tag one by one, we can use group selector to specify this style as:
div, span, section{
margin: 10px;
}
6.Descendent Selector (space).
This selector is used to target all the child elements of parent class. Suppose we want to remove the bullets around all the list items in an unordered list, we can use descendent selector for this purpose as:
ul li{
list-style-type: none;
}
7. Child Selector(>).
The child selector is used to select only those elements that are direct children of a parent class. Say we have a div containing nested unordered list as:
<div class="parent">
<ul>
<li>Item-one</li>
<li>Item-two
<ul>
<li>Item-three</li>
</ul>
</li>
<li>Item-four</li>
</ul>
</div>
Let us give it a style using child selector.
.parent > ul {
list-style-type: none;
}
This removes the bullets only around the list items that are direct children of ul . As the item three is not the direct children of ul so it is not selected.
8. Adjacent Selector(+).
This selector is used to select an element that immediately follows the first element. Consider the markup given below.
<div>
<p>Hello</p>
<p>World</p>
</div>
<p>Welcome to </p>
<p>My Journey</p>
if we want the paragraph tag that follows the div to have a margin of 20px we can select it using adjacent selector as:
div + p{
margin: 20px;
}
This selects the paragraph third only i-e only the paragraph that immediately follows the div and applies the style to that.
9.General Sibling Selector(~).
This selector is simply used to select any element that follows the first element not necessarily the immediate one. Let us have a look at how this works.
<div>
<p>Hello there</p>
</div>
<p>I can find that</p>
<p>I have three paragraphs </p>
<p>after me</p>
<span>Great then</span>
<p>Select them</p>
Now let us try to add CSS and see what happens:
div ~ p{
color: yellow;
}
Here the general sibling selector will select all the three paragraphs that follow it and will add a text color of green to them. The last p tag that follows span will not be selected as it is not a general sibling of div tag. Here it is a general sibling of span element.
10.Attribute Selector (tag[value]).
This selects the elements with specified attribute value only. In the following example we have used an anchor tag and have set its value to "abc.com"
a[href="https://abc.com"] {
color: cyan;
}
This targets only those anchor tags that have an href value matching exactly the same as above and will give it a text color of cyan.