Selectors - Advanced

Previously introduced selectors are the most basic selectors for applying CSS.

This time, let's combine selectors to create more complex ones.

Grouping selectors are used to combine multiple selectors into one.

• Comma (,): Combines two or more selectors. For example, p, h1 selects all p elements and all h1 elements.

Copy
/* Use grouping selectors to apply the same style to both p and h1 elements */
p,
h1 {
  color: blue; /* Set text color to blue */
}

Combinators combine selectors to create more complex ones.

• Adjacent Sibling Combinator (+): Selects the next sibling of the selector. For example, p + h1 selects all h1 elements that are the next sibling of any p element.

• General Sibling Combinator (~): Selects any sibling of the selector. For example, p ~ h1 selects all h1 elements that are siblings of any p element.

Copy
/* Use adjacent sibling combinator to style h1 elements that immediately follow p elements */
p + h1 {
  color: red; /* Set text color to red */
}

/* Use general sibling combinator to style any h1 elements that follow p elements */
p ~ h1 {
  border-bottom: 2px solid black; /* Add a 2px solid black border at the bottom */
}

Pseudo-classes select elements based on certain conditions.

• Form Pseudo-classes: Specify the form of the element. For example, :empty selects empty elements.

• State Pseudo-classes: Specify the state of the element. For example, :hover selects elements when the mouse is over them.

• Structural Pseudo-classes: Specify the relationship of the element. For example, :nth-child() specifies the order of the elements.

Copy
/* Use form pseudo-class to style empty elements */
:empty {
  background-color: lightgray; /* Set background color to light gray */
}

/* Use state pseudo-class to style elements when the mouse is over them */
a:hover {
  text-decoration: underline; /* Add underline */
  color: orange; /* Set text color to orange */
}

/* Use structural pseudo-class to style the third child element of ul */
ul:nth-child(3) {
  font-weight: bold; /* Set font weight to bold */
}

Follow the highlighted parts of the code to input and practice.