CSS Selectors
CSS Selectors as the name indicates, A CSS Selector selects the HTML element or elements that we wanna to style. There are five types of CSS Selectors:
- Simple selectors (It select elements based on name, class, id)
- Combinator selectors (It select elements based on a specific relationship between them)
- Pseudo-class selectors (It select elements based on a certain state)
- Pseudo-elements selectors (Used to select and style a particular part of an element)
- Attribute selectors ( It select elements based on an attribute or attribute value)
In this chapter we will learn the most basic CSS Selectors.
The CSS element Selector
The element selector selects a particular HTML element based on the element name.
Example
h1 {
color:green;
}Now, all <h1> elements on the page will be green in color.
CSS Class Selector
The class selector selects HTML elements that have a specific class attribute.
Example
.center {
text-align: center;
color: green;
}Now, all the HTML elements with class=”center” will be green and aligned to center.
CSS id Selector
The id selector selects HTML elements that have a specific id attribute.
Example
#para1 {
text-align: right;
color: green;
}Now, all the HTML Elements in a page with id “para1” will be green in color and aligned to right.
CSS class Selector
The class selector selects HTML Elements that have a specific class attribute.
Example
.center {
text-align: center;
color: green;
}Now, all the HTML Elements with class “center” will be green and aligned to center.
CSS Universal Selector
The universal selector (*) selects all the HTML Elements on the page.
Example
* {
text-align: center;
color: green;
}Now, all the HTML Elements on the page (p, h1-h6), will be green in color and aligned to center.
CSS Grouping Selector
The grouping selector selects all the HTML Elements that have same style definitions.
Example
h2 {
text-align: center;
color: green;
}
h3 {
text-align: center;
color: green;
}
p {
text-align: center;
color: green;
}In an above code you can see that h2, h3 and p elements have the same style definitions. Here we can also group the selectors, to minimize the code. Like this:
h1, h2, p {
text-align: center;
color: green;
}Related Posts
