A Beginner's Guide to CSS Selectors
Day 7: 60 Days Of Full Stack Web Development Challenge
CSS Selector :
CSS selectors are used to select the content you want to style.
Selectors are the part of CSS rule set.
CSS selectors select HTML elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
CSS Element Selector
CSS Id Selector
CSS Class Selector
CSS Universal Selector
CSS Group Selector
CSS Element Selector :
The element selector selects HTML elements based on the element name.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Aditya Rajendra Gadhave.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Output:
CSS Id Selector :
The id selector selects the id attribute of an HTML element to select a specific element.
An id is always unique within the page so it is chosen to select a single, unique element.
It is written with the hash character (#) followed by the id of the element.
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Aditya Rajendra Gadhave</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
Output:
CSS Class Selector :
The class selector selects HTML elements with a specific class attribute.
The .class selector selects elements with a specific class attribute.
It is used with a period character . (full stop symbol) followed by the class name.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">Aditya Rajendra Gadhave.</h1>
<p class="center">Aditya Rajendra Gadhave.</p>
</body>
</html>
Output:
CSS Class Selector for specific element :
If you want to specify that only one specific HTML element should be affected then you should use the element name with class selector.
<!DOCTYPE html> <html> <head> <style> p.center { text-align: center; color: blue; } </style> </head> <body> <h1 class="center">Aditya Rajendra Gadhave</h1> <p class="center">This paragraph is blue and center-aligned.</p> </body> </html>Output:
CSS Universal Selector :
The universal selector is used as a wildcard character.
It selects all the elements on the pages.
<!DOCTYPE html>
<html>
<head>
<style>
* {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Output:
CSS Group Selector :
The grouping selector is used to select all the elements with the same style definitions.
Grouping selector is used to minimize the code.
Commas are used to separate each selector in grouping.
Let's see the CSS code without group selector.
As you can see, you need to define CSS properties for all the elements. It can be grouped in following ways:
Program:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello Javatpoint.com</h1>
<h2>Hello Javatpoint.com (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>
Output:
Advanatages Of CSS Selector :
Specificity: CSS selectors allow you to target elements with a high level of specificity, which means you can apply styles precisely where you want them without affecting other elements on the page.
Modularity: By using CSS selectors, you can create modular styles that can be applied consistently across your website or application. This helps in maintaining a cohesive design and makes it easier to update styles globally.
Efficiency: CSS selectors allow you to apply styles to multiple elements at once, reducing the need for redundant styling rules. This improves the efficiency of your CSS code and makes it easier to manage.
Flexibility: With CSS selectors, you can target elements based on various criteria such as class names, IDs, attributes, and element types. This flexibility allows you to create complex styles and layout structures.
Compatibility: CSS selectors are supported by all modern web browsers, making them a reliable and widely adopted method for styling web pages.