CSS Selectors
CSS selectors are used to select HTML elements that you want to style. There are many different types of CSS selectors, each of which has a different way of selecting elements.
Simple selectors
Simple selectors are the most basic type of CSS selector. They are used to select elements based on their tag name, id, or class.
- Tag name selectors: These selectors select all elements of a particular tag name. For example, the selector h1 will select all <h1> elements.
- Id selectors: These selectors select elements that have a specific id attribute. For example, the selector #myId will select the element with the id attribute myId.
- Class selectors: These selectors select elements that have a specific class attribute. For example, the selector .myClass will select all elements that have the class attribute myClass.
Example
Style rule to change h1 tags’ font size to 35px.
h1 {
font-size: 35px;
}Combinator selectors
Combinator selectors are used to combine simple selectors to create more complex selectors. There are several different types of combinator selectors, each of which has a different way of combining selectors.
- Adjacent sibling selectors: These selectors select elements that are adjacent siblings of each other. For example, the selector h1 + p will select all <p> elements that are immediately after an <h1> element.
- Child selectors: These selectors select elements that are children of another element. For example, the selector h1 > p will select all <p> elements that are direct children of an <h1> element.
- General sibling selectors: These selectors select elements that are siblings of each other, regardless of their order. For example, the selector h1 ~ p will select all <p> elements that are siblings of an <h1> element, regardless of whether they are before or after the <h1> element.
Example
The selector element h1 selects child element i and changes the color to red.
h1 i {
color: red;
}Pseudo-selectors
Pseudo-selectors are used to select elements based on their state or condition. There are many different types of pseudo-selectors, each of which has a different way of selecting elements.
- Pseudo-class selectors: These selectors select elements based on their state. For example, the pseudo-class selector :hover will select elements that are currently being hovered over by the mouse.
- Pseudo-element selectors: These selectors select parts of elements. For example, the pseudo-element selector :first-letter will select the first letter of an element.
Example
All the anchor elements’ color changes to yellow upon hovering the mouse on that element.
a:hover {
color: yellow;
}Combining selectors
CSS selectors can be combined to create even more complex selectors. For example, the selector h1.myClass > p:hover will select all <p> elements that are direct children of an <h1> element with the class myClass and that are currently being hovered over by the mouse.
Task
Change the color of h1 i combinator selector from red to blue. Add a pseudo-selector after h1 i style rule to change the anchor elements’ color change to green upon hover. Run the code to see the results and experiment with the code to get used to it.
Conclusion
CSS selectors are a powerful tool that can be used to select HTML elements that you want to style. There are many different types of CSS selectors, each of which has a different way of selecting elements. By understanding the different types of CSS selectors, you can create more complex and powerful CSS rules.