CSS selectors are used to select or identifying the HTML elements or content you want to style. It is a pattern of rules that specifies to the browser which HTML elements are being selected. CSS selectors set HTML elements according to their class, id, attribute, etc. Various types of CSS selectors include:
- CSS Element Selector
- CSS Id Selector
- CSS Class Selector
- CSS Universal Selector
- CSS Group Selector
- CSS ELEMENT SELECTOR
HTML has its elements such as P, h1, body, etc. The CSS element selectors identify or select the HTML element by name. Whereby whatever element selected affect other elements that have the same name as the CSS property given to it.
For example:
P { text-align: center; color: blue; }
NOTE: In the example above, all "P" elements will have their text aligned to the center with the color blue.
- CSS ID SELECTOR
The CSS id selector selects the id attribute of an HTML element. The id selector is used to specify one unique element. The hash "#" character is used to identify the id of an element.
For example:
<!DOCTYPE html> <html> <head> <style> #para1 { text-align: center; color: red; } </style> </head> <body> <p id="para1"> Hello World </p> <p>This paragraph will not be affected.</p> </body> </html>
- CSS CLASS SELECTOR
The CSS class selector selects HTML elements with a specific class attribute. The class selector is identified with a dot "." character.
For example:
<!DOCTYPE html> <html> <head> <style> .red-text { text-align: center; color: red; } </style> </head> <body> <h1 class="red-text">This heading is red and center-aligned.</h1> <p class="red-text">This paragraph is red and center-aligned.</p> </body> </html>
NOTE: Only elements with the class ".red-text" will be affected by the CSS properties. One can also use the class selector to specify a particular HTML element.
Example;
<!DOCTYPE html>
<html>
<head>
<style>
p.red-text {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="red-text">This heading isn't affected.</h1>
<p class="red-text">This paragraph is red and center-aligned.</p>
</body>
</html>
- CSS UNIVERSAL SELECTOR
This CSS selector selects all HTML elements on your page. The universal selector is identified with this character "*".
For example:
<!DOCTYPE html>
<html>
<head>
<style>
* {
color: red;
font-size: 10px;
}
</style>
</head>
<body>
<h2>My name is Esosa</h2>
<p>About CSS selectors.</p>
<p id="para1">Hello World!</p>
<p>Css Universal selector!</p>
</body>
</html>
NOTE: All HTML elements will have the CSS properties color "red" and font-size "10px".
- CSS GROUP SELECTOR
The grouping selector is used to select all the elements with the same style definitions. A grouping selector is used to minimize the code. Commas are used to separate each selector in a grouping.
For example:
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
NOTE: In other to minimize your code, one can group the selectors.
For example:
h1, h2, p {
text-align: center;
color: red;
}
Conclusion
The ability to select HTML elements with CSS selectors makes the structure of your code easier, shorter, less bulky, and messy. One can always choose which of these CSS selectors to make use of and it all depends on what kind of style you want to implement on your webpage.
HAPPY CODING WEEKEND!!!