Simple Selectors
Simple selectors contains the below classes.
Simple Selector | Description |
---|---|
Element Selector | Selects HTML elements based on their tag names. |
Id Selector | Targets an HTML element with a specific id attribute. |
Class Selector | Selects elements with a particular class attribute. |
Example: In this example, we will write the code to understand selectors and their uses in a better way.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Selectors</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Sample Heading</h1>
<p>This is Content inside first paragraph</p>
<div id="div-container">
This is a div with id div-container
</div>
<p class="paragraph-class">
This is a paragraph with class paragraph-class
</p>
</body>
</html>
Note: We will apply CSS rules to the above Example.
CSS Selectors
CSS selectors target the HTML elements on your pages, allowing you to add styles based on their ID, class, type, attribute, and more. This guide will help you to understand the intricacies of CSS selectors and their important role in enhancing the user experience of your web pages. Understanding these selectors—such as the universal selector, attribute selector, pseudo-class selector, and combinator selectors—enables more efficient and dynamic web design.