Selectors allow you to target specific HTML elements and apply a style to them. They are case sensitive hence they must match the element name, ID, or Class. Let's discuss some of the basic selectors first.
Basic Selectors
1. Universal Selector
A Universal Selector selects all the elements.
Syntax: *
Example
* {
background-color: #242B2E;
margin: 0;
padding: 0;
}
All the elements will now have a background color along with margin = 0 and padding = 0.
2. Type Selector
A Type Selector is an element selector. The syntax of a type selector is the element's name.
Example
div {
background-color: #E07C24;
height: 20vh;
}
3. Class Selector
A Class Selector selects all the elements that have the class attribute. The same Class can be applied to multiple elements.
Syntax: .
Example
HTML
<body>
<h1 class="heading">
Heading Tag with a class attribute.
</h1>
</body
CSS
.heading {
background-color: #ffffff;
font-family: 'Open Sans';
display: inline-block;
}
4. ID Selector
An ID Selector selects all the elements that have the ID attribute. An ID can only be used once.
Syntax: #
Example
HTML
<body>
<h1 class="heading">
Heading Tag with a class attribute.
</h1>
<p id="paragraph">
Paragraph Tag with ID attribute
</p>
</body
CSS
#paragraph{
color: #1f1f1f;
font-weight: bold;
font-size: 35px;
font-family: 'Open Sans';
background-color: #03C6C7;
display: inline-block
}
5. Attribute Selector
An Attribute Selector selects all the elements that have a given attribute.
Example
autoplay will match all elements that have the autoplay attribute set.
Syntax: [autoplay]
Grouping Selectors
It's a method that selects all the matching elements and applies styles to them.
It can also be used with IDs and Classes.
For example, h1, p.
Syntax: ,
h1, p{
display: block;
text-align: center;
}
Combinators
1. Descendant Combinator
It selects elements that are the descendants of the first element.
Syntax: (space)
Example
div p span{
color: #ffffff;
background-color: #1f1f1f;
}
2. Child Combinator
It selects elements that are direct children of the first element.
Syntax: >
Example
HTML
<body>
<div>
<li>Home</li>
<li>About Us</li>
<ul>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</body>
CSS
div > li{
background-color: #ffffff;
font-size: 20px;
list-style: none;
}
3. General sibling combinator
It selects the second element that follows the first though not necessary immediately and both share the same parent.
Syntax: ~
Example
HTML
<body>
<div>
<li>Home</li>
<li class="about">About Us</li>
<li>Services</li>
<li>Contact</li>
</div>
</body>
CSS
li.about ~ li{
color: #fff;
font-size: 30px;
background-color: aqua;
}
4. Adjacent sibling combinator
It matches the second element only if it immediately follows the first element.
Syntax: +
Example
HTML
<body>
<div>
<li>Home</li>
<li class="about">About Us</li>
<li>Services</li>
<li>Contact</li>
</div>
</body>
CSS
li.about + li{
color: #fff;
font-size: 30px;
background-color: aqua;
}
Pseudo-Classes
It is a keyword added to a selector that specifies a special state of the selected element.
Syntax: :
Example
HTML
<body>
<button>
Hover
</button>
</body>
CSS
body{
background-color: #E07C24;
}
button{
margin-left: 45%;
margin-top: 13%;
background-color: #ffffff;
border: none;
font-size: 60px;
padding: 10px 40px;
border-radius: 11px;
transition: .2s ease-in-out;
}
button:hover{
box-shadow: 0px 0px 80px 80px #000 inset;
color: #fff;
}
Read more about Pseudo-Classes here
Pseudo Elements
It represents entities that are not included in HTML. It is used to style a specific part of the selected element.
Syntax: ::
Some commonly used pseudo-elements are as follows:
::first-line::after::before