When styling a web page, there are many types of selectors available that allow developers to be as broad or as specific as they need to be when selecting HTML elements to apply CSS rules to.
Here you will learn about some of the common CSS selectors that you will use as a developer.
Element Selectors
The element selector allows developers to select HTML elements based on their element type.
For example, if you use p as the selector, the rule will apply to all p elements on the webpage.
HTML
1
Once upon a time...
2
In a hidden land...
CSS
1
p {
2
color: blue;
3
}•
ID Selectors
The ID selector uses the id attribute of an HTML element. Since the id is unique within a webpage, it allows the developer to select a specific element for styling. ID selectors are prefixed with a # character.
HTML
1
•New!
CSS
1
latest {
2
background-color: purple;
3
}••
Class Selectors
Elements can also be selected based on the class attribute applied to them. The CSS rule has been applied to all elements with the specified class name. The class selector is prefixed with a . character.
In the following example, the CSS rule applies to both elements as they have the navigation CSS class applied to them.
HTML
1
•Go Back
2
•
Go Forward
CSS
1
.navigation {
2
margin: 2px;
3
}••
Element with Class Selector
A more specific method for selecting HTML elements is by first selecting the HTML element, then selecting the CSS class or ID.
The example below selects all p elements that have the CSS class introduction applied to them.
HTML
1
CSS 1 p.introduction { 2 margin: 2px; 3 }•• Descendant Selectors Descendant selectors are useful if you need to select HTML elements that are contained within another selector. Let's explore an example. You have the following HTML structure and CSS rule. HTML 1
2
Latest News
3
4
Today's Weather
5
The weather will be sunny
6
7
Subscribe for more news
8
9 10
Archives
11CSS
1
blog h1• {
2
color: blue;
3
}
The CSS rule will select all h1 elements that are contained within the element with the ID blog. The CSS rule will not apply to the h1 element containing the text Archives.
The structure of a descendant selector is a CSS selector, followed by a single space character, followed by another CSS selector.
Multiple descendants can also be selected. For example, to select all h1 elements that are descendants of div elements which are descendants of the blog element, the selector is specified as follows.
CSS
1
blog div h1• {
2
color: blue;
3
}
Child Selectors
Child selectors are more specific than descendant selectors. They only select elements that are immediate descendants (children) of a selector (the parent).
For example, you have the following HTML structure:
HTML
1
2
Latest News
3
4
Today's Weather
5
The weather will be sunny
6
7
Subscribe for more news
8
If you wanted to style the h1 element containing the text Latest News, you can use the following child selector:
CSS
1
blog > h1• {
2
color: blue;
3
}
This will select the element with the ID blog (the parent), then it will select all h1 elements that are contained directly in that element (the children). The structure of the child selector is a CSS selector followed by the child combinator symbol > followed by another CSS selector.
Note that this will not go beyond a single depth level. Therefore, the CSS rule will not be applied to the h1 element containing the text Today's Weather.
:hover Pseudo-Class
A special keyword called a pseudo-class allows developers to select elements based on their state. Don't worry too much about what that means right now. For now, let's look at how the hover pseudo-class allows you to style an element when the mouse cursor hovers over the element.
The simplest example of this is changing the color of a hyperlink when it is hovered over. To do this, you add the :hover pseudo-class to the end of the selector. The following example will change the color of the hyperlink to orange when it is hovered over.
CSS
1
:hover {
2
color: orange;
3
}
This pseudo-class is very useful for creating visual effects based on user interaction.
Other Selectors
There are many other CSS selectors available to style your webpage.
Top comments (0)