Types of Selectors in HTML and CSS

In HTML and CSS, selectors are used to target HTML elements so that styles can be applied to them, or they can be manipulated using JavaScript. There are various types of selectors, each serving a different purpose.

1. Element Selector

Description: Selects all elements of a specific type.

<p>This is a paragraph.</p>

This targets all <p> elements in the HTML document.

p {
    color: blue;
}

This selects all <p> elements in the document.

document.querySelectorAll('p');

2. Class Selector

Description: Selects all elements with a specific class attribute.

<div class="alert">Alert Box</div>

This targets all elements with class=”alert”.

.alert {
    font-weight: bold;
}

This selects all elements with class=”alert”.

document.querySelectorAll('.alert');

3. ID Selector

Description: Selects a single element with a specific id attribute.

<div id="navbar">Navigation Bar</div>

This targets the element with id="navbar".

#navbar {
    background-color: grey;
}

This selects the element with id="navbar" (though querySelector is more common for IDs).

document.querySelectorAll('#navbar');

4. Attribute Selector

Description: Selects elements based on the presence or value of an attribute.

<input type="text">

This targets all <input> elements with type="text".

input[type="text"] {
    background-color: yellow;
}

This selects all <input> elements with type="text".

document.querySelectorAll('input[type="text"]');

5. Pseudo-class Selector

Description: Selects elements based on their state or relation to other elements.

<a href="#">Link</a>

This targets <a> elements when they are hovered over.

a:hover {
    color: red;
}

This targets <a> element when it is hovered over

document.querySelector('a:hover');

6. Pseudo-element Selector

Description: Selects part of an element.

<p>First letter styling</p>

This targets the first letter of each <p> element.

p::first-letter {
    font-size: 150%;
}

NOTE: Not applicable with querySelectorAll, as pseudo-elements are not part of the DOM.

7. Descendant Selector

Description: Selects an element that is a descendant of another specified element.

<div><p>Paragraph inside a div</p></div>

This targets <p> elements that are inside a <div>.

div p {
    margin-left: 20px;
}

This selects <p> elements that are inside a <div>.

document.querySelectorAll('div p');

8. Child Selector

Description: Selects an element that is a direct child of another specified element.

<ul><li>List Item</li></ul>

This targets <li> elements that are direct children of <ul>.

ul > li {
    color: green;
}

This selects <li> elements that are direct children of <ul>.

document.querySelectorAll('ul > li');

9. Adjacent Sibling Selector

Description: Selects an element that is an immediate sibling of another specified element.

<h1>Heading</h1><p>Paragraph after heading</p>

This targets the first <p> element immediately following a <h1>.

h1 + p {
    font-style: italic;
}

This selects the first <p> element immediately following a <h1>.

document.querySelectorAll('h1 + p');

10. General Sibling Selector

Description: Selects all elements that are siblings of a specified element.

<h1>Heading</h1><p>First Paragraph</p><p>Second Paragraph</p>

This targets all <p> elements that follow a <h1>, regardless of their immediate adjacency.

h1 ~ p {
    border: 1px solid black;
}

This selects all <p> elements that follow a <h1>, regardless of their immediate adjacency.

document.querySelectorAll('h1 ~ p');