CSS Selectors
CSS selectors help you pick which HTML elements to style. They’re like addresses that tell the browser, “Apply these styles to these parts of the page.” For example, to change the color of all paragraphs, use a selector for all <p> tags. Selectors make it easy to style specific elements.
Let’s break down the main types of selectors and how they work:
1. Element Selector
The element selector targets HTML elements by their name.
For example, if you want to style all <p> (paragraph) tags on your page, you use the element selector like this:
p {
color: blue;
text-align: center;
}
This rule makes all paragraph text blue and center-aligned.
Here’s how you might use this CSS in an HTML document:
Output:
In this example:
CSS Styling: The CSS rules inside the <style> element apply to all <p> (paragraph) elements:
• color: blue; sets the text color to blue.
• text-align: center; centers the text horizontally within each paragraph.
Body Section: The <body> section contains two <p> elements, both of which will display centered, blue text due to the applied CSS.
2. ID Selector
The ID selector is used to style a specific HTML element with a unique ID. Since an ID should be unique on a page, it’s perfect for targeting one specific element.
To use it, start with a hash (#) followed by the ID name:
#uniqueParagraph {
color: red;
font-size: 20px;
}
This rule will only affect the element with id=”uniqueParagraph”.
To apply this style to a specific paragraph in your HTML, you would use the id attribute like this:
<!DOCTYPE html>
<html>
<head>
<style>
#uniqueParagraph {
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p id=”uniqueParagraph”>This paragraph has a unique style.</p>
<p>This is a normal paragraph.</p>
</body>
</html>
Output:
In this example:
• CSS Block in <style> Tag: The CSS rules are defined inside a <style> tag within the <head> section of the HTML document. This is where styles are commonly placed for internal CSS.
• ID Selector: The #uniqueParagraph selector targets the HTML element with the id attribute set to uniqueParagraph. This ID should be unique within the HTML document, meaning only one element should have this ID.
• Styled Paragraph: The paragraph with the id=”uniqueParagraph” has red text and a font size of 20 pixels, as specified by the CSS rules.
• Normal Paragraph: The second paragraph does not have the id=”uniqueParagraph”, so it will not be affected by these specific styles and will display with the default browser styles or any other styles that might be defined elsewhere.
3. Class Selector
The class selector targets elements with a specific class attribute. Multiple elements can share the same class, and you can use the same class on different types of elements.
To use it, start with a period (.) followed by the class name:
.centered {
text-align: center;
color: green;
}
This rule will apply to all elements with class=”centered”.
Here’s how it can be applied in an HTML document:
<!DOCTYPE html>
<html>
<head>
<style>
.centered {
text-align: center;
color: green;
}
</style>
</head>
<body>
<p class=”centered”>This is a centered, green paragraph.</p>
<p class=”centered”>This is another centered, green paragraph.</p>
<p>This is a normal paragraph without the centered class.</p>
</body>
</html>
Output:
In this example:
• CSS Class Selector: The .centered selector targets any HTML element with the class attribute set to centered. The . prefix denotes a class in CSS.
• Text Alignment: The text-align: center; property centers the text within its parent element.
• Text Color: The color: green; property sets the text color to green.
• Applying the Class: The class is applied to HTML elements using the class attribute, like this: <p class=”centered”>. Multiple elements can use the same class, allowing consistent styling across different parts of the HTML document.
You can also combine a class with an element type to be more specific:
p.centered {
text-align: center;
color: purple;
}
This rule will only style <p> elements with the class centered.
Here’s how you can use this CSS class in an HTML document:
<!DOCTYPE html>
<html>
<head>
<style>
p.centered {
text-align: center;
color: purple;
}
</style>
</head>
<body>
<p class=”centered”>This is a centered, purple paragraph.</p>
<p class=”centered”>Another centered, purple paragraph.</p>
<p>This is a normal paragraph without the centered class.</p>
</body>
</html>
Output:
In this example:
• CSS Class Selector for Specific Elements: The p.centered selector combines the element type (p) and the class name (centered). It ensures that only <p> elements with the class centered will receive the specified styles.
• Text Alignment: The text-align: center; property centers the text within each <p class=”centered”> element.
• Text Color: The color: purple; property sets the text color to purple.
• Applying the Class: The class is applied to specific <p> elements using the class attribute, ensuring that only those <p> elements with class=”centered” are styled according to the CSS rule.
4. Universal Selector
The universal selector (*) applies styles to all elements on the page.
It’s useful for resetting or adding a common style to everything:
* {
margin: 0;
padding: 0;
}
This rule removes all default margins and padding from every element.
Here’s how you can use it in an HTML document:
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
}
h1 {
font-size: 2em;
margin-bottom: 20px;
}
p {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Resetting Styles Example</h1>
<p>This paragraph has no default margin or padding.</p>
<p>All elements start from a reset state.</p>
</body>
</html>
Output:
In this example:
• Universal Selector: The * selector resets the margin and padding of all elements to 0, creating a consistent baseline.
• Body Styling: Sets the font family to Arial, sans-serif for a clean look, and Adds padding: 20px to the body to provide some space around the content.
• Heading 1 Styling: Sets the font size to 2em to make the heading prominent, and Adds a margin-bottom: 20px to create space below the heading.
• Paragraph Styling: Adds a margin-bottom: 10px to create space between paragraphs.
5. Grouping Selector
The grouping selector lets you apply the same styles to multiple elements without repeating code.
Just separate each selector with a comma:
h1, h2, p {
text-align: center;
color: black;
}
This rule makes the text in <h1>, <h2>, and <p> elements centered and black.
Here is how it can be used in an HTML document:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: brown;
}
</style>
</head>
<body>
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a paragraph.</p>
<p>Another paragraph with the same styling.</p>
</body>
</html>
Output:
In this example:
• h1, h2, p: This selects all h1, h2, and p elements.
• text-align: center;: Centers the text within these elements.
• color: brown;: Sets the text color to brown for these elements.
6. Attribute Selector
Attribute selectors target elements based on their attributes or attribute values.
For example, to style links that have a target attribute:
a[target] {
background-color: yellow;
}
This rule styles all <a> (anchor) elements with a target attribute by giving them a yellow background color.
Here is how it can be used in an HTML document:
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Anchor Styling Example</h1>
<p>This is a normal link: <a href=”https://www.example.com”>Example</a></p>
<p>This is a link with a target: <a href=”https://www.example.com” target=”_blank”>Example with target</a></p>
<p>This is another link with a target: <a href=”https://www.example.com” target=”_self”>Example with target</a></p>
</body>
</html>
Output:
In this example:
• a[target]: This selector targets all <a> elements that have a target attribute, regardless of its value.
• background-color: yellow;: This style sets the background color of these anchor elements to yellow.
Or to style links that point to a specific URL:
a[href=”https://www.example.com”] {
color: orange;
}
This rule targets anchor elements (<a>) with a specific href attribute value and sets their text color to orange.
Here is how it can be used in an HTML document:
<!DOCTYPE html>
<html>
<head>
<style>
a[href=”https://www.example.com”] {
color: orange;
}
</style>
</head>
<body>
<h1>Specific Link Styling Example</h1>
<p>This is a normal link: <a href=”https://www.otherwebsite.com”>Other Website</a></p>
<p>This is a link to example.com: <a href=”https://www.example.com”>Example</a></p>
<p>This is another link to example.com with additional text: <a href=”https://www.example.com”>Example Link</a></p>
</body>
</html>
Output:
In this example:
• a[href=”https://www.example.com”]: This selector targets all <a> elements that have an href attribute exactly matching https://www.example.com.
• color: orange;: This style sets the text color of these anchor elements to orange.
Course Video
YouTube Reference:
CSS Basic Selectors Tutorial in Hindi / Urdu
