CSS selectors are patterns that are used to select and style HTML elements. There are several types of selectors in CSS. Here’s an overview of some common ones along with examples and syntax:
1. Universal Selector (*):
Selects all elements on the page.
Example:
Apply a margin to all elements.
<!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=”demo.css” /><title>CSS</title><!–styling–><style>* {margin: 0;}</style></head><body><h1>Universal Selector</h1></body></html>
Output:
2. Element Selector (Type Selector):
Selects all instances of a specified HTML element.
Example:
Style all p elements.
<!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=”demo.css” /><title>CSS</title><!–styling–><style>p {color: blue;}</style></head><body><h1>Element Selector</h1><p>I am Element Selector</p></body></html>
Output:
3. Class Selector (.):
Selects all elements with a specified class attribute.
Example:
Style all elements with the class “highlight.”
<!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=”demo.css” /><title>CSS</title><!–styling–><style>.highlight {background-color: yellow;}</style></head><body><h1 class=”highlight”>Element Selector</h1><p>I am Element Selector</p></body></html>
Output:
4. Id Selector (#):
Selects a single element with a specified ID attribute.
Example:
Style the element with the ID “header.”
<!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=”demo.css” /><title>CSS</title><!–styling–><style>#header {font-size: 24px;}</style></head><body><h1 id=”highlight”>Id Selector</h1><p>I am Id Selector</p></body></html>
Output:
5. Descendant Selector (Space):
Selects all elements that are descendants of a specified element.
Example:
Style all span elements that are descendants of a div.
<!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=”demo.css” /><title>CSS</title><!–styling–><style>div span {font-weight: bold;color: aqua;}</style></head><body><div><h1>Descendant Selector</h1><p>I am <span>Descendant</span> Selector</p></div></body></html>
Output:
6. Child Selector (>):
Selects all direct children of a specified element.
Example:
Style all li elements that are direct children of a ul.
<!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=”demo.css” /><title>CSS</title><!–styling–><style>ul>li {list-style-type: square;}</style></head><body><div><h1>Child Selector</h1><h2>Types of selectors:</h2><ul><li>class selector</li><li>id selector</li><li>child selector</li><li>descendant selector</li></ul></div></body></html>
Output:
7. Adjacent Sibling Selector (+):
Selects an element that is immediately preceded by a specified element.
Example:
Style any p element that directly follows an h2 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=”demo.css” /><title>CSS</title><!–styling–><style>h2+p {font-style: italic;}</style></head><body><div><h1>Adjacent Sibling Selector</h1><h2>Types of selectors:</h2><p>I Am Adjacent Sibling Selector</p></div></body></html>
Output:
8. Attribute Selector ([]):
Selects elements based on the presence or value of their attributes.
Example:
Style all links with the attribute target="_blank".
<!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=”demo.css” /><title>CSS</title><!–styling–><style>a[target=”_blank”] {color: red;}</style></head><body><div><h1>Attribute Selector</h1><a href=”http://www.google.com” target=”_blank”>google.com</a></div></body></html>
Output: 
9. Pseudo-class Selector (:):
Selects elements based on their state or position.
Example:
Style all unvisited links.
<!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=”demo.css” /><title>CSS</title><!–styling–><style>a:link {text-decoration: none;font-size:larger;}a:hover{color: blue;}</style></head><body><div><h1>Pseudo Selector</h1><a href=”http://www.google.com” target=”_blank”>google.com</a></div></body></html>
Output:
10. Pseudo-element Selector (::):
Selects a specific part of an element.
Example:
Style the first line of a p 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=”demo.css” /><title>CSS</title><!–styling–><style>p::first-line {background-color: pink;}</style></head><body><div><h1>Pseudo-element Selector</h1><p>This is pseudo-element selector. <br>Selects a specific part of an element.</p></div></body></html>
Output:
