CSS Selectors:
CSS Selectors are used to target the HTML elements that we want to style. A CSS selector is the first part of a CSS rule. It defines a pattern that instructs the browser which HTML elements should be targeted to apply the specified CSS properties.
The different types of CSS Selectors are:
- Simple Selectors
- Class Selector
- ID Selector
- Type (tag name) Selector
- Attribute Selector
- Universal Selector
- Pseudo-class
- Compound Selectors
- Complex Selectors
1. Class Selectors:
The CSS class selector targets all HTML elements that have a specific class name. It starts with a dot (.) followed by the class name. For example, the CSS class selector .paragraph will select all HTML elements with the class paragraph. Multiple elements in an HTML document can share the same class name.
Syntax:
HTML:
CSS:
.heading {
color: orange;
font-size: 28px;
font-weight: 600;
}
.paragraph {
color: blue;
}
ID Selector:
The CSS ID selector targets a specific HTML element based on its ID attribute. It starts with a hash (#), followed by the element’s ID. For example,
- The CSS ID selector #populationParagraph will select the element with the ID populationParagraph.
- Each ID should be unique, meaning only one element in the entire HTML document should have a particular ID.
- The ID value doesn’t need any prefix, such as section, unless required by specific guidelines.”
Syntax:
#idname{
property1: value1;
property2: value2;
}
HTML
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
CSS
#countryHeading {
color: orange;
font-size: 28px;
font-weight: 600;
}
#populationParagraph {
color: blue;
}
#statesParagraph {
color: green;
}
Type (tag name) Selector:
The CSS type selector targets all HTML elements based on their tag names (e.g., h1, p, div). For example, the CSS type selector p will select all <p> elements in the HTML document.
Syntax
#tagname{
property1: value1;
property2: value2;
}
HTML
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>About USA</h1>
<p>The population of USA is around 33.33 crores.</p>
<p>There are 50states in USA.</p>
</body>
</html>
CSS:
h1 {
color: orange;
font-size: 28px;
font-weight: 600;
}
p {
color: blue;
}
Attribute Selectors:
Attribute Selectors in CSS that focus on elements depending on their properties, such as type, link, source, or any other property in HTML. These selectors are helpful when you want to apply styles to elements with specific attributes.
Syntax
[element[attribute]]{
property1: value1;
property2: value2;
}
HTML
<h1>Attribute value selectors</h1>
<ul>
<li>Item 1</li>
<li class=”a”>Item 2</li>
<li class=”a b”>Item 3</li>
<li class=”ab”>Item 4</li>
</ul>
CSS
/* Select all input elements with a “type” attribute */
input[type] {
border: 1px solid red;
}
/* Select input elements with type=”text” */
input[type=”text”] {
background-color: lightblue;
}
/* Select links (a elements) where the href starts with “https” */
a[href^=”https”] {
color: green;
}
/* Select image elements where the src ends with “.jpg” */
img[src$=”.jpg”] {
border: 2px solid #000;
}
Pseudo Class Selectors:
A CSS pseudo-class is a keyword added to a selector to target elements in specific states. For instance, the :hover pseudo-class applies styles to a button when a user’s pointer hovers over it.
Syntax
selector:pseudo-class{
property1: value1;
property2: value2;
}
HTML
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>CSS Pseudo-Class Example</title>
</head>
<body>
<nav>
<ul>
<li><a href=”home.html”>Home</a></li>
<li><a href=”service.html”>Service</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</nav>
</body>
</html> href=”contact.html”>Contact</a></li>
</ul>
</nav>
</body>
</html>
CSS
a {
text-decoration: none;
color: red;
font-weight: normal;
transition: color 0.3s ease;
}
a:hover {
color: #0056b3;
text-decoration: underline;
}
a:visited {
color: #6c757d;
}
a:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}
a:first-of-type {
font-weight: bold;
}
Universal Selectors:
The universal selector (*) is a special type selector that can be namespaced using @namespace. This is particularly useful in documents with multiple namespaces, such as HTML containing inline SVG or MathML, or XML documents that combine various vocabularies.
HTML
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Universal Selector Example</title>
</head>
<body>
<div class=”container”>
<p>This is a paragraph.</p>
<button>Click Here for button Element</button>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
/* Reset margin and padding for all elements */
* {
margin: 0;
padding: 0;
}
.container {
padding: 20px;
border: 1px solid #ddd;
}
p {
margin-bottom: 10px;
}
Compund Selectors:
Compound selectors in CSS enable the targeting of elements based on several combined criteria. They facilitate the application of styles to elements that fulfill all defined conditions. These selectors are formed by merging various simple selectors, including type, class, and ID selectors, without any intervening spaces.
Complex Selectors:
Complex selectors in CSS enable the targeting of elements through more sophisticated relationships and combinations of basic selectors. They facilitate the definition of styles for elements according to their hierarchy, sibling connections, and various selector combinations. The use of complex selectors is crucial for styling specific elements within a well-organized document.