Knowing the types of selectors in CSS
Last update: 01 - 11 - 2023
What are the CSS selectors?
It is a CSS element that allows us to select tags, attributes, classes or IDs in the HTML document which we have assigned a CSS file. CSS selectors allow us to style specific parts of our web page. ✅
How to use CSS selectors?
CSS works with declarations and this is where the protagonist of this article makes an appearance. To further explain CSS selectors we are going to see detailed examples of their features and what kind of selectors we can use to style our web page.
CSS selector types
Basic selectors
Type or element selector
Selects all the HTML tags you have specified. Just enter the name of the element you want to modify and make the declaration.
The most optimal way to apply CSS styles is with an external document but for the examples of CSS selectors we will use a basic HTML structure with the style tag for didactic purposes in this article. 🙂
<head>
<meta charset="UTF-8">
<meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
<title>CSS selectors</title>
<style>
<!-- Selecting P tags -->
p{
color:"red";
}
</style>
</head>
<body>
<p>Element selector</p>
<p>Random paragraph 1</p>
<p>Random paragraph 2</p>
</body>
In this example the color of all texts with the P tag will be red.
Class selector
Selects the elements that have been assigned a class in the HTML document. Its syntax is the same as a tag selector with a dot (.) before the selector.
<head>
<meta charset="UTF-8">
<meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
<title>CSS Selectors</title>
<style>
<!-- Selecting by class -->
.blue-letter{
color:"blue";
}
</style>
</head>
<body>
<!-- Assigning a class -->
<p class="blue-letter">Class selector</p>
<p>Random paragraph 1</p>
<p>Random paragraph 2</p>
</body>
The first paragraph is affected by the styles applied in the blue-letter class. If there were more tags (regardless of which one) with the same class assigned to them, they will also have the same styles.
The advantage of using class selectors is that it can be used multiple times in different tags, so you can save lines of CSS code if you are going to repeat a property in different parts of a website.
ID selector
This selector shares the same syntax as the class selector, its difference is that it uses a hash (#) at the beginning of the declaration.
<head>
<meta charset="UTF-8">
<meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
<title>CSS Selectors</title>
<style>
<!-- Selecting by ID -->
#h1-title{
font-size:25px;
}
</style>
</head>
<body>
<!-- Assigning an ID -->
<h1 id="h1-title"> Random Main Title</h1>
<p>Random paragraph 1</p>
<p>Random paragraph 2</p>
<p>Random paragraph 3</p>
</body>
The ID selector will only modify the element to which it is assigned BUT there can only be one selector with the same name in the HTML document so it is not recommended for use in CSS. This selector is more used to manipulate HTML elements with JavaScript manipulating the DOM.
Attribute selector
This selector takes HTML elements that have an attribute, such as an href in an a tag, a type in an input tag or a src in a script tag. Attributes are additional behavior modifiers of a tag.
The way to write this selector in CSS uses square brackets [ ] to specify the element with the attribute type. Let's see an example with an input.
<head>
<meta charset="UTF-8">
<meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
<title>CSS Selectors</title>
<style>
<!-- Selecting by Attribute -->
input[ type="text" ]{
padding:2rem;
}
</style>
</head>
<body>
<input type="text">
</body>
In this case the inputs that have the attribute type="text" will be affected by the changes made in the CSS but if there were others with a different attribute, such as type="num", they would not be affected.
Universal selector
Selects all the elements of our HTML file. The styles applied to this selector will be reflected in all tags.
This selector uses the asterisk (*) to make the universal selection.
<head>
<meta charset="UTF-8">
<meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
<title>CSS Selectors</title>
<style>
<!-- Universal selector -->
*{
margin:0;
padding:0;
}
</style>
</head>
<body>
<input type="text">
</body>
This selector can be used to set or remove default values from the browser, although care must be taken with the values to be modified.
Combinators
Child combinator selector
This selector will affect the child tags assigned to it. Just as the body tag has as children all the visual elements in the HTML document (the ones we see in the browser), there are tags that also have internal elements that are called children.
In this example we will see a div tag with three different child elements.
<head>
<meta charset="UTF-8">
<meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
<title>CSS Selectors</title>
<style>
<! -- Selecting by child combinator -->
div > p{
color:"green";
font-size:"18px";
}
</style>
</head>
<body>
<div>
<h3>Title inside the div</h3>
<p>Paragraph inside the div</p>
<p>Another paragraph inside the div</p>
<span>A random span 😆</span>
</div>
</body>
The child elements of this div are an h3, two p's and a span. The direct child selector, represented with the greater-than sign (>) will affect child elements that match the selected element. (The p tags in this example).
Descendant combinator selector
Selects child elements that are inside another element or tag, it works in a very similar way to the direct child selector.
<head>
<meta charset="UTF-8">
<meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
<title>CSS Selectors</title>
<style>
<!-- Selecting by descendant combinator -->
div span{
color:"green";
font-size:"18px";
}
</style>
</head>
<body>
<div>
<h3>Generic title</h3>
<p>Generic paragraph</p>
<p>Second generic paragraph</p>
<span>Generic span</span>
</div>
</body>
The span inside the div tag is the one that will be affected by the styles.
Adjacent sibling combinator selector
Select the next element that has the same "family hierarchy" within the HTML. The plus sign (+) is used to select the tag to which you want to apply the styles.
<head>
<meta charset="UTF-8">
<meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
<title>CSS selectors</title>
<style>
<!-- Selecting by adjacent sibling combinator -->
div + section{
background-color:"purple";
height:"200px";
}
</style>
</head>
<body>
<div>
<h3>H3 Title</h3>
<p>A random paragraph</p>
<p>A random paragraph 2</p>
<span>a span tag</span>
< /div>
<section>
<p>This section will be affected by the adjacent sibling selector.</p>
</section>
</body>
The div tag and the section tag have the same hierarchy and can be considered siblings within their parent body container.
General sibling combinator selector
This selector works similarly to the adjacent element selector with the difference that it will affect ALL designated sibling elements within the HTML selected tag. It uses the virgule sign (~) to select the element to be affected.
<head>
<meta charset="UTF-8">
<meta http-equi="X-UA-Compatible" content="width=device-width, initial-scale=1.0">
<title>CSS Selectors</title>
<style>
<!-- Selecting by general sibling combinator -->
div ~ section{
background-color:"purple";
height:"200px";
}
</style>
</head>
<body>
<div>Div 1</div>
<section>Section 1 affected</section>
<section>Section 2 affected</section>
<section>Section 3 affected</section>
</body>