CSS3 Selectors

CSS3 has introduced many new selectors that provide more flexibility and power in targeting elements within the document. 

Here are some of the key CSS3 selectors

Universal Selector ( * )

Although not new to CSS3, the universal selector targets all elements in the document.

* {
   /* Applied styles on all elements */
}

Attribute Selectors

CSS3 introduced a number of attribute selectors to target elements based on their attributes.

/* Selects the elements using specific attribute */
[attribute] {
   /* Applied styles on specified attribute elements */
}
/* Selects elements by specific attribute with value */
[attribute="value"] {
   /* Applied styles on elements that have specified attribute and value */
}
/* Selects elements using attribute starting with the specified value */
[attribute^="value"] {
   /* Applied styles on elements using attribute starting with the specified value */
}
/* Select the elements using an attribute ending with the specified value */
[attribute$="value"] {
   /* Applied styles on elements using attribute ending with the specified value */
}
/* Selects elements that have an attribute with the specified value */
[attribute*="value"] {
   /* Applied styles on elements that have attribute containing the specified value */
}

Child Selectors (>)

A child connector refers to an element that is a direct child of another element.

/* Select the direct children of an element */
parent > child {
   /* Styles applied to direct children of the parent element */
}

Adjacent Sibling Selector (+)

An adjacent sibling connector refers to an element with an immediately preceding sibling element.

/* Selects the element immediately preceding another element */
element + adjacent-sibling {
   /* Applied css style to the adjacent sibling element */
}

General Sibling Selector (~)

A generic sibling joiner refers to all sibling elements following an element.

/* Selects all sibling elements that come after an element */
element ~ sibling {
   /* Applied css styles to sibling elements following the element */
}

Negation Selector (:not())

The Negativity pseudo-class allows you to select objects that do not match the specified selector.

/* Selects elements that are not of a certain type */
:not(selector) {
   /* Apply styles to elements that do not match the specified selector */
}

These are some of the basic CSS3 choices that provide more advanced ways to target elements within a document, allowing for greater flexibility and control over the format.

Also, Read: Understanding CSS Units (em, rem, px, cm)