CSS Selectors 101: Targeting Elements with Precision
What is CSS ?
CSS (Cascading Style Sheets) is a styling language used to describe the presentation of a document written in HTML. While HTML defines the structure and content of a webpage (like the skeleton), CSS defines the style and appearance (like the skin and clothing).
Why is it used?
CSS is used to control how HTML elements are displayed on screen. Key reasons include:
Visual Styling: It controls colours, fonts, background images, and borders.
Layout and Positioning: It allows you to move elements around, create columns, and manage spacing (margins and padding).
Separation of Concerns: It separates the content (HTML) from the design.
Targeting Elements: You can apply styles to specific groups of elements or unique elements.
How is it applied?
CSS can be applied to a webpage in 3 ways:
External CSS: Using a
.cssfile and linking it via the<link>tag in the<head>.Internal CSS: Adding a
<style>tag within the<head>section.Inline CSS: Adding the global
styleattribute directly to an HTML element.
Priority Rules: If conflicting styles are applied to the same element then priority in which styles would be applied are defined by the specificity algorithm mentioned below:
| Selector Type | Example | Weight/Points |
| Inline Styles | <p style="color: red;"> | 1,0,0,0 (conceptually highest) |
| ID Selectors | #navbar | 0,1,0,0 |
| Classes, Attributes, Pseudo-classes | .test, [type="text"], :hover | 0,0,1,0 |
| Elements and Pseudo-elements | h1, ::before | 0,0,0,1 |
Universal Selector & :where() | *, :where() | 0,0,0,0 |
CSS Selectors
CSS selectors are patterns used to select and style the HTML elements you want. There are various types of CSS selectors, some of them are listed below:
1. Element Selector
This is the most basic selector. It selects HTML elements based on their tag name.
Example: If you want to make all paragraphs (<p>) on your page have red text, you would use the element selector p.
p {
color: red;
}
2. Class Selector
The class selector finds elements based on the value of their class attribute. It's denoted by a period (.) followed by the class name. This is very useful because you can apply the same class to multiple elements.
Example: To style all elements with class="highlight", you would use the .highlight selector.
<p class="highlight">This paragraph will be highlighted.</p>
<div>This div will not be.</div>
<p class="highlight">This one will also be highlighted.</p>
.highlight {
background-color: yellow;
}
3. ID Selector
The ID selector is used to select one unique element based on its id attribute. It's denoted by a hash (#) followed by the ID name. According to web standards, an element's id must be unique within a page.
Example: To style the single element with id="main-header", you would use the #main-header selector.
<h1 id="main-header">My Awesome Website</h1>
#main-header {
font-size: 32px;
border-bottom: 1px solid black;
}
4. Grouping Selector
The grouping selector allows you to apply the same styles to multiple selectors at once, without repeating the style rules. You just separate the different selectors with a comma (,).
Example: Instead of writing separate rules for <h1>, <h2>, and <h3>, you can group them.
/* Without grouping */
h1 {
color: navy;
}
h2 {
color: navy;
}
h3 {
color: navy;
}
/* With grouping */
h1, h2, h3 {
color: navy;
}
5. Descendant Selector
The descendant selector matches all elements that are descendants (children, grandchildren, etc.) of a specified element. You define it by listing two or more selectors separated by a space.
Example: To select only the <p> elements that are located inside a <div> element, you would use div p.
<div>
<p>This paragraph is inside a div and will be green.</p>
<span><p>This paragraph is also a descendant and will be green.</p></span>
</div>
<p>This paragraph is NOT inside a div and will not be affected.</p>
div p {
color: green;
}
