What are CSS Selectors?
CSS selectors are used to select and target HTML elements that you want to style. They allow developers to apply CSS properties to specific elements, groups of elements, or elements based on their attributes and relationships.
CSS selectors are an important part of CSS because they help control the appearance of HTML elements efficiently and precisely.
CSS Selector Syntax
A CSS selector identifies the HTML elements that should receive a particular style. A CSS rule consists of a selector followed by a declaration block.
selector {
property: value;
}Example:
p {
color: blue;
font-size: 18px;
}In this example, the p selector selects all paragraph elements and applies the specified styles.
Types of CSS Selectors
CSS provides different types of selectors to target HTML elements in various ways.
1. CSS Element Selector
The element selector selects HTML elements based on their tag names. It applies styles to every element of that type.
Example:
h1 {
color: red;
}
p {
color: blue;
}This example selects all <h1> elements and all <p> elements.
2. CSS ID Selector
The ID selector selects an HTML element using its unique ID attribute. It is written using the hash (#) symbol followed by the ID name.
Example:
#heading {
color: green;
font-size: 30px;
}HTML:
<h1 id="heading">Hello World</h1>An ID should be unique within an HTML document.
3. CSS Class Selector
The class selector selects HTML elements that have a specific class attribute. It is written using a dot (.) followed by the class name.
Example:
.highlight {
background-color: yellow;
color: black;
}HTML:
<p class="highlight">This is highlighted text.</p>The same class can be used on multiple HTML elements.
4. CSS Universal Selector
The universal selector selects all HTML elements on a webpage. It is represented by an asterisk (*).
Example:
* {
margin: 0;
padding: 0;
}This example removes the default margin and padding from all elements.
5. CSS Grouping Selector
The grouping selector allows developers to apply the same styles to multiple selectors. Selectors are separated using commas.
Example:
h1, h2, p {
color: blue;
font-family: Arial, sans-serif;
}This example applies the same color and font family to all heading and paragraph elements selected.
6. CSS Attribute Selector
The attribute selector selects HTML elements based on their attributes or attribute values. It is written using square brackets.
Example:
input[type="text"] {
border: 2px solid blue;
}This example selects input elements whose type attribute is equal to text.
7. CSS Descendant Selector
The descendant selector selects elements that are located inside another specified element, regardless of how deeply they are nested.
Example:
div p {
color: red;
}This example selects every paragraph element inside a div element.
8. CSS Child Selector
<!DOCTYPE html>
<html>
<head>
<style>
/* Element selector */
h1 {
color: blue;
}
/* ID selector */
#demo {
color: red;
}
/* Class selector */
.highlight {
background-color: yellow;
}
/* Descendant selector */
div p {
font-size: 20px;
}
/* Hover pseudo-class */
button:hover {
background-color: green;
color: white;
}
/* Pseudo-element */
p::first-letter {
font-size: 30px;
}
</style>
</head>
<body>
<h1>CSS Selectors</h1>
<h2 id="demo">ID Selector Example</h2>
<p class="highlight">Class Selector Example</p>
<div>
<p>Descendant Selector Example</p>
</div>
<button>Hover Me</button>
</body>
</html>
}
@media (max-width: 768px) {
.grid-container {
grid-template-columns: 1fr;
gap: 16px;
}
}