What is a CSS selector?
HTML code without styling is boring and looks horrible, CSS allows us to style the HTML skeleton and bring it to life. CSS selectors help us to select the part we want to style. It offers a variety of ways to select any given HTML component.
body {
background-color: #d4d4d4;
}
In the above example body is the CSS Selector, background-color is the Css property and #d4d4d4 is the value for the CSS property
We will discuss the various types of CSS selectors in this Article.
Basic Selectors
The Basic Selectors are used much more than other Selectors. They are simple and easy to understand. Let us go over them.
Type Selector
Type Selector uses the HTML tags to target the field we want to style HTML
<h1>This is Heading 1</h1>
CSS
h1{
color: red
}
Output
h1 here is the HTML tag and we are changing the text color by targeting the h1 tag
Class Selector
Class Selectors are widely used and can be very useful to manipulate the style of the html, it is an efficient way to style elements. We can add multiple classes to same tag separated by a space like <p class="classh2 classbold">This is a paragraph</p>. When we want to target the classes in CSS we can use "." without the quotes before the class name. Example
HTML
<h1>This is Heading 1</h1>
<h2 class="classh2"> This is Heading 2</h2>
CSS
.classh2{
color: blue
}
Output
We can also assign the classto other elements and the styles of the class will be applied to the other elements as well.
HTML
<h1 class="classh2">This is Heading 1</h1>
<h2 class="classh2"> This is Heading 2</h2>
CSS
.classh2{
color: blue
}
Output
Here we can see classh2 styles being applied to h1 after we gave it the class of classh2
Id Selectors
Id selectors are used less compared to the class selector. Id selectors should have unique ids. You can have the same id at multiple places but it's frowned upon. To Select element via Id we need to use # sign before the name of the id as opposed to . for classes. Example
HTML
<h1 class="classh2">This is Heading 1</h1>
<h2 id="idforh2"> This is Heading 2</h2>
CSS
.classh2{
color: blue
}
#idforh2{
color: red
}
Output
Attribute Selectors
Now we arrived at the Attribute Selectors. In this article we will be using the Anchor tag <a></a>. CSS Attribute Selector matches elements based on the presence or value of the attribute mentioned in css file.
[attr] This just targets the tag with the given attribute
HTML
<a href="" title="some">Anchor tag with attribute title</a>
CSS
a[title] {
background-color: purple;
}
Output
[attr=value]
This targets the attribute whose value is exactly equal to the value mentioned
HTML
<a href="notepad.com">Anchor tag with href matching notepad.com</a>
CSS
a[href="notepad.com"] {
background-color: green;
}
Output
[attr*=value]
This targets the attribute which has at least one occurrence of value in the mentioned attr
HTML
<a href="example">Anchor tag with href containing example</a>
CSS
a[href*="example"] {
background-color: rgb(51, 0, 128);
}
Output
[attr$=value]
This targets the attribute which has the value as a suffix
HTML
<a href="www.random.org">Anchor tag ending with .org</a>
CSS
a[href$=".org"] {
background-color: rgb(128, 0, 0);
}
Output
[attr~=value]
This targets the attribute which has the value in a set of white-space separated values
HTML
<a href="some.com" class="logo anchor blackbox">Anchor tag with class of logo</a>
CSS
a[class~="logo"] {
background-color: rgb(255, 0, 170);
}
Output
Now you have an idea of how the attribute selectors work. If you want to dig deeper into Attribute selectors, please refer to MDN docs
Group Selectors
Group selectors are useful when we want to apply one style to multiple elements, we can use mention multiple attribute/tag names separated by a , to use the group selector method of selecting the HTML elements.
HTML
<h1>This is Heading 1</h1>
<h2 class="testing">This is Heading 2</h2>
<h3 id="testing2">This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
CSS
h1,.testing,#testing2,h4,h5,h6{
background-color: aqua;
}
Output
As you have seen in h2 and h3, targeting can be mixed with other attributes as well when using group selectors
Combinator Selectors
Descendant Combinator
The descendant combinator is represented by a space character like div p. Here the parent element is div and the descendant is the p tag. This combinator will match all the p tags inside of the div
HTML
<ul>
<li>
<div>Item 1</div>
<ul>
<li>Subitem A</li>
<li>Subitem B</li>
</ul>
</li>
<li>
<div>Item 2</div>
<ul>
<li>Subitem A</li>
<li>Subitem B</li>
</ul>
</li>
</ul>
CSS
li {
list-style-type: disc;
}
li li {
list-style-type: circle;
background-color: aqua;
}
Output
Child Combinator
This might seem like the descendant combinator but its not. There is a difference, as the child combinator targets only those elements which are a direct child of the first parent element. It is represented by >
HTML
<div>
<span>Span #1, in the div.<br>
<span>Span #2, in the span that's in the div.</span><br>
</span>
</div>
<span>Span #3, not in the div at all.</span>
CSS
span {
background-color: aqua;
}
div > span {
background-color: yellow;
}
Output
An easy way to remember the difference between the two would be to consider the English meaning of the words;
- Our children are both our child and descendant
- Our grandchildren are just our descendants.
Another point to note here is that for very large websites the child selector is faster compared to descendant selectors as you have over 1000 of DOM elements.
General Sibling Combinator
This is represented by ~. It can be used to target the second element that comes after the first element. div~p will target all the p that comes after the div element.
HTML
<p><strong>This paragraph will not be selected.</strong></p>
<h1>The break Point</h1>
<p><strong>This paragraph will be selected.</strong></p>
<p><strong>And this paragraph will also be selected.</strong></p>
CSS
h1{
background-color: aqua;
}
h1 ~ p {
background-color: #FEF0B6;
padding: 5px;
}
Output
Adjacent Sibling Combinator
The adjacent sibling combinator + separates two selectors and targets the second element only if it immediately follows the first element and both are children of the same parent element.
HTML
<p>This example demonstrates the use of CSS</p>
<h1>The break point</h1>
<p>Vincent van Gogh Green Wheat Fields, Auvers 1890 Painting</p>
<p>Lorem ipsum dolor sit amet</p>
<h1>Break point 2</h1>
<p>Claude Monet The Japanese Footbridge 1899 Painting</p>
<p>Lorem ipsum dolor sit a</p>
CSS
h1 + p {
font-style: italic;
background-color: aqua;
font-size: 14px;
}
Output
To read more about the Combinator refer to MDN docs
Pseudo Selectors
There are two types of Pseudo selectors both provide a plethora of options for us to choose from to target the elements.
Pseudo Classes
: is used to target the special state of a particular element :hover is one such state in which the style of a particular element changes on hovering over it. Here hover is a pseudo-class. A list of such pseudo-classes can be found here
Pseudo Elements
:: This is referred to as Pseudo elements and like the pseudo-classes, this also has a variety of options. An example would be p::first-line, this will target the first line of the paragraph. To find out about the list of the Pseudo element refer here
I have tried to put light on most of the things related to selectors. For more refer to MDN docs. Thanks for reading and Keep Learning!