To begin with, CSS selectors are essential tools that allow web developers to target and style specific HTML elements. In this article, we will explore different types of CSS selectors, ranging from basic tag and class selectors to more advanced attribute, pseudo-class, and pseudo-element selectors. Additionally, understanding how these selectors work will help you write cleaner, more maintainable, and more specific stylesheets. As a result, you will be able to create better-organized styles and improve the overall design of your web pages.
If you have not checked my past article about CSS Guide then you can check it here.
Generally, We can divide CSS selectors into five categories:
- Simple Selectors
- Combinator Selectors
- Pseudo-class Selectors
- Pseudo-element Selectors
- Attribute selectors
1 – Simple Selectors
Simple selectors select elements based on name, id, and class.
<style>
h1 {
background-color: #808080;
}
</style>
<body>
<h1>CSS Selectors</h1>
</body><style>
#primary-header {
background-color: #808080;
}
</style>
<body>
<h1 id="primary-header">CSS Selectors</h1>
</body><style>
.primary-header {
background-color: #808080;
}
</style>
<body>
<h1 class="primary-header">CSS Selectors</h1>
</body>2 – Combinator Selectors
A combinator is something that explains the relationship between the selectors. There are 4 different combinators in CSS.
2.1 – descendant selector (space)
The CSS descendant combinator (a single space) selects elements inside elements. The following example selects all <p> elements inside <div> elements.
<style>
div p {
background-color: #808080;
}
</style>
<body>
<div>
<p>Combinator Selectors</p>
</div>
</body>2.2 – child selector (>)
The child combinator selects all elements that are direct children of a specified element. The following example selects all <p> elements that are direct children of <div>.
<style>
div > p {
background-color: #808080;
}
</style>
<body>
<div>
<p>Child Selector</p>
<p>Child Selector example</p>
<section>
<!-- This is not direct children of div. -->
<p>Another paragraph.</p>
</section>
</div>
</body>2.3 – adjacent sibling selector (+)
adjacent sibling selector select an element that is directly after a specific element. The following example selects the first <p> element that immediately follows a <div>.
<style>
div + p {
background-color: #808080;
}
</style>
<body>
<div>
<p>Adjacent Sibling Selector</p>
</div>
<p>Next sibling selector</p>
</body>2.4 – general sibling selector (~)
general sibling selector selects all elements that are next siblings of a specified element. The following example selects all <p> elements that are next siblings of <div>.
<style>
div ~ p {
background-color: #808080;
}
</style>
<body>
<div>
<p>General Sibling Selector</p>
</div>
<p>Subsequent sibling selector</p>
<span>Some text.</span>
<p>Another paragraph.</p>
</body>3 – Pseudo-class Selectors
A Pseudo-class defines a style for a special state of an element. We can use pseudo-class in many ways:
- Style an element when a user mouses over it
- Style visited and unvisited links differently
- Style an element when it gets focus
Here is an example of using the :hover pseudo-class on a <div> element:
<style>
div:hover {
background-color: #808080;
}
</style>
<body>
<div>
<p>Pseudo class selector examples</p>
</div>
</body>Here is an example of using the :focus pseudo-class to style an <input> field when it gets focus:
<style>
input:focus {
background-color: #808080;
}
</style>
<body>
<div>
<form action="#" method="get">
<input type="text" name="fname"><br>
</form>
</div>
</body>4 – Pseudo-element Selectors
A pseudo-element is used to style specified parts of an element. It can be used in many ways.
- Style the first letter, or line of an element
- Insert content before or after of an element
The ::first-letter pseudo-element is used to add a special style to the first letter of a text.
<style>
p::first-letter {
font-size: 36px;
}
</style>
<body>
<div>
<p>Pseudo-element Selectors</p>
</div>
</body>The ::before and ::after pseudo-elements are used to insert some content before or after the content of a specified element.
<style>
p::before {
content: "Read this:";
}
p::after {
content: "Remember this - ";
}
</style>
<body>
<div>
<p>Pseudo-element Selectors</p>
</div>
</body>5 – Attribute Selectors
Additionally, CSS attribute selectors are used to select and style HTML elements with a specific attribute or attribute value, or both.
Use the attribute selector below to target all <a> elements that have a target attribute.
<style>
a[target] {
background-color: #808080;
}
</style>
<body>
<div>
<a href="#" target="_top">Attribute Selectors</p>
</div>
</body>To select links with target="_blank", apply the following CSS rule.
<style>
a[target="_blank"] {
background-color: #808080;
}
</style>
<body>
<div>
<a href="#" target="_blank">Attribute Selectors</p>
</div>
</body>You can also match elements whose class attribute contains a specific word, such as "text", using the selector shown below.
<style>
p[class~="text"] {
background-color: #808080;
}
</style>
<body>
<div>
<p class="text">Top Paragraph!</p>
<p class="text primary">Primary Paragraph!</p>
</div>
</body>The [attribute|="value"] selector selects elements with the specific attribute, whose value can be exactly the specific value, or start with the specific value followed by a hyphen (-).
<style>
p[class|="top"] {
background-color: #808080;
}
</style>
<body>
<div>
<p class="top">Welcome!</p>
<p class="top-text">Top Paragraph!</p>
</div>
</body>The [attribute^="value"] selector selects elements with the specific attribute, whose value starts with a specific value. The following example selects all elements with a class attribute value that starts with “top”.
<style>
p[class^="top"] {
background-color: #808080;
}
</style>
<body>
<div>
<p class="top">Welcome!</p>
<p class="topcenter">Top Center Paragraph!</p>
</div>
</body>The [attribute$="value"] selector selects elements whose attribute value ends with a specific value. The following example selects all elements with a class attribute value that ends with “test”.
<style>
p[class$="test"] {
background-color: #808080;
}
</style>
<body>
<div>
<p class="primary_test">Welcome!</p>
<p class="secondary-test">Test Paragraph!</p>
</div>
</body>The [attribute*="value"] selector selects elements whose attribute value contains a specific value. The following example selects all elements with a class attribute value that contains “te”.
<style>
p[class*="te"] {
background-color: #808080;
}
</style>
<body>
<div>
<p class="test">Welcome!</p>
<p class="first_test">Test Paragraph!</p>
</div>
</body>CSS Selectors are the fundamental tool for applying styles. You use them to target a specific element, a group of elements, or elements based on their attributes, allowing you to precisely control styling across your web page. For example, the following code demonstrates how to use the most common CSS selector types. Feel free to use this example to experiment and gain a clearer understanding of how different selectors work.
See the Pen CSS Selectors by Code Hacks (@code-hacks) on CodePen.
Conclusion
In conclusion, CSS selectors are essential for targeting and styling HTML elements effectively. By understanding different types of selectors, you can apply styles more precisely to your web pages.
Therefore, learning how to use CSS selectors correctly will help you build more consistent and attractive websites. Finally, practice these selectors with different HTML and CSS examples to strengthen your understanding and improve your web development skills.
If you enjoyed this article, we’d love to hear your thoughts. Feel free to share your feedback, questions, or suggestions in the comments section below.
If you have any questions or would like to get in touch with us, please don’t hesitate to reach out us.