In CSS, selectors are used to target the HTML elements on our web pages that we want to style. There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style.
Types of Selectors:
When it comes to basic selectors there are really only 5 types that all other selectors are built on and those are the universal, type, class, id, and attribute selector.
Universal Selector:
The universal selector*selects all HTML elements on the page.
Example:
<ul>
<li>blue</li>
<li>red</li>
<li>black</li>
</ul>
* {
border: 1px solid ;
}
Type Selector:
This selector matches all elements that belong to the specified type.
Example:
<p>A paragraph</p>
<p>Another paragraph</p>
<p>One more paragraph</p>
p {
font-size: 1.5rem;
}
This will apply a font size of 1.5rem to all <p> elements. Easy and direct.
Class Selector:
This selector is represented by a period.and matches all elements that contain the specified class.
Example:
<button class="btn btn-primary">Save</button>
<button class="btn btn-danger">Cancel</button>
.btn {
border: 1px solid black;
}
.btn-primary {
background-color: blue;
}
.btn-danger {
background-color: red;
}
ID Selector:
This selector is represented by#and matches the unique element that contains the specified id.
Example:
<nav id="nav-bar">...</nav>
#nav-bar {
margin-bottom: 1rem;
}
Attribute Selector:
It matches all the HTML elements which contain a specified attribute and whose value for that attribute satisfies a given condition.
Example:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
a[href] {
color: white;
text-decoration: none;
}
Grouping Selectors:
Grouping selectors in CSS is basically used to put together those elements of different type or with different id/classes that we want to apply the same style properties to.
This selector is represented by a comma , and matches all the elements stated in the list and applies the same ruleset to all of them.
Example:
<h1>Computer Science Engineering</h1>
<h2>List of courses</h2>
<ul>
<li>Algebra</li>
<li>Calculus</li>
<li>Physics</li>
<li>Discrete Mathematics</li>
<li>Introduction to Programming</li>
</ul>
h1, h2, li {
color: darkred;
}
This will apply a dark red color to every <h1>, <h2> and <li> element.
Combining Selectors:
CSS selectors can also be combined. CSS combinators are used to establish a relationship between different selectors and are very useful to make your element selection more targeted.
Descendant Combinator:
This combinator is represented by a single space( )and matches all elem2 that are descendants of elem1. Example:<nav> <ul> <li><a>Home</a></li> <li> <a>People</a> <ul> <li><a>Students</a></li> <li> <a>Faculty members</a> <ul> <a>Discrete Mathematics</a> <a>Programming</a> <a>Physics</a> <a>Algorithms</a> </ul> </li> <li><a>Staff members</a></li> </ul> </li> <li><a>About</a></li> <li><a>Contact</a></li> </ul> </nav>
nav a {
border: 1px solid crimson;
color: darkslateblue;
font-size: 1.5rem;
font-weight: bold;
}
This will apply a 1px solid crimson border, a dark slate blue color, a font size of 1.5rem and a bold font weight to every <a> element that is descendant of a <nav> element, regardless of how nested they are.
Child Combinator:
This combinator is represented by a prompt>and matches all elem2 that are direct children of elem1. Example:<div class="box"> <p>This is a direct child of .box</p> <div> <p>This is not a direct child of .box</p> </div> <p>This is another direct child of .box</p> </div>
.box > p {
color: darkgoldenrod;
}
This will apply a dark golden color to every <p> element that is a direct child of any element that has the class box, so, in this HTML example, the first and last <p> elements will be selected, but not the one in the middle.
General Sibling Combinator:
This combinator is represented by a tilde
~and matches all elem2 that are siblings to elem1 and come after it. Example:<img src="blue-mug.jpeg" alt="a regular blue coffee mug" /> <p>Blue mug</p> <p>Price: $15</p>img ~ p { color: darkblue; }This will apply a dark blue color to every
<p>element which is a sibling of any<img>element and comes after it. In this example, both<p>elements will be selected.Adjacent Sibling Combinator:
This combinator is represented by a plus symbol
+and matches all elem2 that are siblings to elem1 and appear immediately after it. Example:<img src="blue-mug.jpeg" alt="a regular blue coffee mug" /> <p>Blue mug</p> <p>Price: $15</p>img + p { color: darkblue; }In this case, only the first
<p>element will be selected, since the second one doesn't appear immediately after the<img>element.
Pseudo-Classes:
A CSS pseudo-class is a keyword that is added to a selector and defines a special state of the selected elements.
This selector is represented by a colon :.
Example:
<h1>Shopping list</h1>
<ul>
<li>Milk</li>
<li>Butter</li>
<li>Eggs</li>
<li>Sugar</li>
</ul>
li:hover {
background-color: black;
color: white;
}
In this example, we're applying a black background color and a white text color to every <li> element when the cursor hovers over it.
Some of the most common CSS pseudo-classes are:
:active, :hover, focus, :disabled, :checked, :first-child, :nth-child, :first-of-type.
Pseudo-Elements:
A CSS pseudo-element is a keyword that is added to a selector to style a specific part of the selected elements.
This selector is represented by a double colon ::.
Example:
<p>CODE</p>
p::before{
content: "_";
}
In this example, we're appending an underscore symbol in front of every <p> element.
Some of the most common CSS pseudo-elements are:
::after, ::before, ::marker, ::placeholder, ::first-letter.