CSS Selectors

CSS selectors are patterns used to select and style HTML elements. They are a fundamental part of CSS, enabling developers to apply styles to specific elements or groups of elements. Here is a detailed overview of various types of CSS selectors:

1. Basic Selectors

1.1. Universal Selector

• Selects all elements on the page. 

*{ color: red; } 

1.2. Type Selector

• Selects all elements of a given type (tag name).

p {
font-size: 16px;
}

1.3. Class Selector

• Selects all elements with a given class attribute. Classes are defined with a dot (.) followed by the class name.

.button {
background-color: blue;
}

1.4. ID Selector

• Selects a single element with a specific ID. IDs are defined with a hash (#) followed by the ID name.

#header {
background-color: green;
}

1.5. Attribute Selector

• Selects elements based on an attribute or attribute value.

/* Selects all input elements with a type attribute equal to "text" */
input[type="text"] {
border: 1px solid #ccc;
}

2. Combinator Selectors

2.1. Descendant Combinator

• Selects elements that are descendants of a specified element.

/* Selects all <span> elements inside <div> elements */
div span {
color: red;
}

2.2. Child Combinator

• Selects elements that are direct children of a specified element.

/* Selects all <p> elements that are direct children of <div> elements */
div > p {
margin: 0;
}

2.3. Adjacent Sibling Combinator

• Selects an element that is directly adjacent to a specified element.

/* Selects the first <p> element that is immediately preceded by an <h1> element */
h1 + p {
font-weight: bold;
}

2.4. General Sibling Combinator

• Selects all elements that are siblings of a specified element.

/* Selects all <p> elements that are siblings of an <h1> element */
h1 ~ p {
color: blue;
}

3. Pseudo-classes Selector

3.1. :hover

• Selects elements when the user hovers over them.

a:hover {
text-decoration: underline;
}

3.2. :focus

• Selects elements that are focused.

input:focus {
outline: none;
border: 2px solid blue;
}

3.3. :nth-child()

• Selects elements based on their position in a parent element's child list.

/* Selects every second <li> element */
li:nth-child(2n) {
background-color: lightgray;
}

4. Pseudo-elements

4.1. ::before

• Inserts content before the content of an element.

p::before {
content: "Note: ";
font-weight: bold;
}

4.2. ::after

• Inserts content after the content of an element.

p::after {
content: " (end)";
}

5. Grouping Selectors

• Selects multiple elements and applies the same styles to them.

/* Applies the same styles to <h1> and <h2> elements */
h1, h2 {
font-family: Arial, sans-serif;
}

6. Advanced Selectors

6.1  Attribute Selectors

[attribute]: Selects elements with a specific attribute.

/* Selects all elements with a title attribute */
[title] {
  border-bottom: 1px dotted black;
}

6.2 [attribute=value]:

 Selects elements with a specific attribute value.

/* Selects all input elements with type="radio" */
input[type="radio"] {
  margin: 10px;
}

6.3[attribute~=value]:

 Selects elements with an attribute containing a specified word.

/* Selects elements with a class attribute containing the word "note" */
[class~="note"] {
  background-color: yellow;
}

6.4 [attribute|=value]: 

Selects elements with an attribute value either exactly equal to a specified value or starting with the specified value followed by a hyphen.

/* Selects elements with a lang attribute equal to "en" or starting with "en-" */
[lang|="en"] {
  color: green;
}

7. Structural Pseudo-classes

7.1 :first-child: 

Selects the first child of a parent.

/* Selects the first <li> element in any list */
li:first-child {
  font-weight: bold;
}

7.2 :last-child: 

Selects the last child of a parent.

/* Selects the last <li> element in any list */
li:last-child {
  font-style: italic;
}

7.3 :nth-of-type():

 Selects elements of a specific type based on their position.

/* Selects the second <p> element of its parent */
p:nth-of-type(2) {
  color: red;
}

7.4 :only-child: 

Selects an element that is the only child of its parent.

/* Selects any <p> element that is the only child of its parent */
p:only-child {
  font-size: larger;
}