CSS selectors are patterns used to select and target specific HTML elements in order to apply styles to them. Selectors determine which elements on a web page will be affected by the CSS rules you define.
Here are some common types of CSS selectors:
Element Selector: An element selector in CSS is used to target and apply styles to all instances of a specific HTML element on a webpage. It is the simplest and most fundamental type of selector.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>element selector</title>
</head>
<body>
<p>This is a red text.</p>
<p>In this example, the p selector targets all <p> elements, and the specified properties (color and font-size) will be applied to each <p> element on the page.</p>
</body>
</html>
p{
color: red;
font-size: 24px;
}
Note:-
• Element selectors are not case-sensitive. <p>, <P>, and <P> would all be valid selectors for <p> elements.
• The properties defined within the selector's block will be applied to all instances of the selected element.
Class Selector: A class selector in CSS is used to target and apply styles to elements with a specific class attribute. Class selectors are particularly useful when you want to apply the same styling to multiple elements without affecting other elements on the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Class selector</title>
</head>
<body>
<p class="highlight">This is a plain text.</p>
<p class="highlight">In this example, any element with the class "highlight" will have a yellow background color and bold font weight applied to it.</p>
</body>
</html>
.highlight{
background-color: yellow;
font-weight: bold;
font-size: 25px;
}
Note:-
• Class names are preceded by a dot (.) to indicate that it's a class selector.
• Class names can consist of letters, numbers, hyphens, and underscores but must start with a letter.
• Multiple elements can share the same class, allowing you to maintain consistent styling across different parts of your page.
• Class selectors have a higher specificity than element selectors, which means they can override general element styles.
ID Selector:An ID selector in CSS is used to target and apply styles to a specific HTML element that has a unique ID attribute. Unlike class selectors, which can be applied to multiple elements, an ID selector targets only one element with the specified ID.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>ID selector</title>
</head>
<body>
<div id="header">
In this example, the styles defined within the #header selector will be applied to the element with the ID "header."
</div>
</body>
</html>
#header{
background-color: #333;
color: white;
padding: 10px;
}
Note:-
• ID names are preceded by a hash (#) to indicate that it's an ID selector.
• IDs must be unique within the HTML document. Only one element should have a specific ID.
• ID selectors have a high specificity, which means they can override both class and element styles.
• While IDs can be used for styling, they're often more suitable for targeting specific elements for JavaScript manipulation or as anchor points for linking within a page.
Universal Selector:The universal selector (*) in CSS targets all elements on a webpage. It's a wildcard selector that can be used to apply styles to every HTML element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Universal selector</title>
</head>
<body>
<p> Here's an example of using the universal selector to apply a border and margin to all elements.</p>
<p>You can see that the styles defined within the universal selector will be applied to every element on the page.</p>
</body>
</html>
*{
margin: 0;
padding: 0;
border: 1px solid gray;
}
Note:-
• The universal selector has the lowest specificity, which means other more specific selectors (such as class or ID selectors) will override its styles.
• While the universal selector can be useful for quickly applying a reset or normalization styles to all elements, it should be used judiciously to avoid unintended consequences.
• Overusing the universal selector can result in performance issues if complex styles are applied to a large number of elements.
Grouping Selector:A grouping selector in CSS allows you to apply the same styles to multiple selectors. This helps you avoid repeating the same styles for different elements and promotes more efficient and concise CSS code. To group selectors, you simply separate them with commas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Grouping selector</title>
</head>
<body>
<h2>Welcome to JTC</h2>
<p>Here's an example of using a grouping selector to apply the same font styles to multiple elements:</p>
</body>
</html>
*{
margin: 0;
padding: 0;
}
h2, p{
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
Note:-
• Grouping selectors allow you to apply the same styles to multiple elements without duplicating the styles.
• Grouping selectors are separated by commas, and all selectors within the grouping share the same set of styles.
• You can include any type of selectors within a grouping: element, class, ID, pseudo-class, etc.
• Grouping selectors increase code readability and make it easier to update styles consistently across multiple elements.