Advanced Element Selection in CSS - Techniques and Examples

Pseudo-classes

Pseudo-classes allow you to select specific states or positions of an element. For example, :hover selects the element when the mouse pointer is over it, :focus selects the element when it is selected or has focus, :nth-child() selects a specific child element in a group.

Examples:

/* Select all links when hovered over and change the text color */
a:hover {
  color: red;
}

/* Select the <input> element when it is focused and change the border */
input:focus {
  border: 2px solid blue;
}

/* Select the second element in a group of <li> elements and change the text color */
li:nth-child(2) {
  color: green;
}

Pseudo-elements

Pseudo-elements allow you to create virtual elements to customize an existing element.

For example, ::before and ::after create elements before and after an element, ::first-line and ::first-letter select the first line and first letter of an element.

Examples:

/* Add content before each <p> element and style it */
p::before {
  content: ">> ";
  font-weight: bold;
  color: gray;
}

/* Style the first letter of <h1> element */
h1::first-letter {
  font-size: 2em;
  font-weight: bold;
  color: red;
}

Combinators

Combinators allow you to combine selectors to select elements based on their relationship. For example, element1 element2 selects element2 inside element1, element1 > element2 selects direct child elements of element1, element1 + element2 selects element2 immediately after element1.

Examples:

/* Select <span> elements inside an element with class "container" */
.container span {
  color: purple;
}

/* Select <li> elements that are direct children of <ul> */
ul > li {
  list-style-type: square;
  color: blue;
}

Attribute selectors

Attribute selectors allow you to select elements based on the value of their attributes. For example, [attribute] selects elements with the attribute attribute, [attribute=value] selects elements with the attribute attribute equal to value, [attribute^=value] selects elements with the attribute attribute starting with value.

Examples:

/* Select all elements with the attribute data-type */
[data-type] {
  font-weight: bold;
  color: orange;
}

/* Select all <a> elements with the href attribute starting with "https://" */
a[href^="https://"] {
  color: blue;
  text-decoration: underline;
}

:not() selector

The :not() selector allows you to select elements that do not match a specific selector. For example, :not(.class) selects elements that do not have the class class, :not(#id) selects elements that do not have the ID id.

Examples:

/* Select all <div> elements that do not have the class "hidden" */
div:not(.hidden) {
  display: block;
  background-color: lightgray;
}

/* Select all <input> elements that do not have the ID "email-input" */
input:not(#email-input) {
  border: 1px solid gray;
}

These examples demonstrate advanced element selection in CSS. You can customize and apply these techniques to style and customize elements on your web page as desired.