CSS Selectors
The HTML element(s) you wish to style are chosen using a CSS selector.
CSS Selectors
To “find” (or choose) the HTML components you wish to style, utilize CSS selectors.
Five categories can be used to group CSS selectors:
- Basic selectors (items selected by name, id, or class)
- Combinator selectors (that choose components according to a particular relationship between them)
- pseudo-class selectors (which choose items according to a particular state)
- Selectors for pseudo-elements (choose and style a portion of an element)
- Select components according to an attribute or attribute value using attribute selectors
We’ll go over the most fundamental CSS selectors on this page.
The CSS element Selector
HTML elements are chosen by the element selector according to their element name.
Example
p.one {
border-style: solid;
border-color: #ff0000; /* red */
}
The CSS id Selector
The id selector selects a particular HTML element by using its id attribute.
The id selector is used to choose a single unique element because each element’s id is unique within a page!
To designate an element with a certain id, type the element’s id after the hash (#) character.
Example
The CSS rule below will be applied to the HTML element with id=”para1″:
#para1 {
text-align: center;
color: red;
}
Note: An id name cannot start with a number!
The CSS class Selector
HTML elements having a certain class attribute are chosen by the class selector.
Type the class name after the period (.) character to select components that belong to that particular class.
Example
In this example all HTML elements with class=”center” will be blue and center-aligned:
.center {
text-align: center;
color: red;
}
It is also possible to indicate that a class should only apply to particular HTML elements.
Example
In this example only <p> elements with class=”center” will be blue and center-aligned:
p.center {
text-align: center;
color: red;
}
HTML elements can also refer to more than one class.
Example
In this example the <p> element will be styled according to class=”center” and to class=”large”:
<p class="center large">This paragraph refers to two classes.</p>
Note: A class name cannot start with a number!
The CSS Universal Selector
All HTML components on the page are selected using the universal selector (*).
Example
The CSS rule below will affect every HTML element on the page:
* {
text-align: center;
color: red;
}
The CSS Grouping Selector
All of the HTML elements with the same style specifications are chosen by the grouping selector.
Examine the CSS code below, where the style definitions for the h1, h2, and p elements are the same:
h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p {
text-align: center;
color: blue;
}
Grouping the selectors will help blueuce the amount of code.
Put a comma between each selector to group them together.
Example
In this example we have grouped the selectors from the code above:
h1, h2, p {
text-align: center;
color: red;
}
All CSS Simple Selectors
| Selector | Example | Example description |
|---|---|---|
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| element.class | p.intro | Selects only <p> elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |
CSS selectors
HTML elements
basic selectors
combinator selectors
pseudo-class selectors
pseudo-element selectors
attribute selectors
element selector
id selector
class selector
universal selector
grouping selector
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
CSS selectors are the fundamental building blocks of CSS, allowing you to target and style specific HTML elements on a web page. In this section, we will explore the different types of CSS selectors and how to use them effectively.
Basic Selectors:
– Element Selector: Targets HTML elements by their tag name (e.g., h1, p, div).
– ID Selector: Targets a specific element with a unique ID attribute (e.g., #header).
– Class Selector: Targets elements with a specific class attribute (e.g., .button).
– Universal Selector: Targets all elements on the page (*).
– Grouping Selector: Targets multiple elements at once, separated by commas (e.g., h1, h2, p).
Combinator Selectors:
– Descendant Selector: Targets elements that are descendants of another element (e.g., div p).
– Child Selector: Targets elements that are direct children of another element (e.g., ul > li).
– Adjacent Sibling Selector: Targets elements that are adjacent siblings (e.g., h1 + p).
– General Sibling Selector: Targets elements that are siblings, regardless of their position (e.g., h1 ~ p).
Pseudo-class Selectors:
– Target elements based on their state or position (e.g., :hover, :focus, :first-child).
Pseudo-element Selectors:
– Target specific parts of an element (e.g., ::before, ::after, ::first-line).
Attribute Selectors:
– Target elements based on their attribute values (e.g., [type=”text”], [href^=”https://”], [class~=”button”]).
Understanding and mastering CSS selectors is crucial for effective web development and styling. By leveraging these powerful tools, you can precisely target and style the desired elements on your web pages.
CSS selectors are a fundamental part of Cascading Style Sheets (CSS) and are used to target and style specific HTML elements on a web page. In this section, we will explore the different types of CSS selectors and how they can be used to effectively style your web content.
At the most basic level, CSS selectors can be divided into several categories:
1. **Basic Selectors**: These include element selectors, class selectors, ID selectors, and the universal selector.
2. **Combinator Selectors**: These allow you to select elements based on their relationship to other elements, such as child, adjacent sibling, and general sibling selectors.
3. **Pseudo-class Selectors**: These select elements based on their state or position, such as :hover, :active, and :first-child.
4. **Pseudo-element Selectors**: These select and style specific parts of an element, such as ::before and ::after.
5. **Attribute Selectors**: These select elements based on the presence or value of a specific attribute, such as [type=”text”].
By understanding and mastering these different types of CSS selectors, you can precisely target and style the elements on your web pages, creating visually appealing and responsive designs.
