CSS 2

Adjacent Selector (+)

The adjacent selector in CSS, denoted by X + Y, selects the element (Y) that is immediately preceded by the former element (X). For example, applying div + p affects the p tag that comes right after a closing div tag.

Child Selector (>)

Using X > Y in CSS means that Y is the immediate child of X. This selector targets elements that are direct children of a specific parent element.

General Sibling Selector (~)

The general sibling selector, represented by X ~ Y, is similar to the adjacent selector but less strict. For instance, div ~ p applies styles to the p tag that comes after a closing div tag at the same level.

Attribute Selectors

• X[href="foo"]: Targets elements where the href attribute is exactly “foo”.
• X[href*="foo"]: Selects elements where the href attribute contains the substring “foo”.
• X[href^="foo"]: Matches elements with an attribute that starts with “foo”.
• X[href$="foo"]: Matches elements with an attribute that ends with “foo”.
• X[data-*="foo"]: Selects elements with an attribute that starts with “data-” and has the value “foo”. For example, X[data-xyz="foo"] will target all elements with data-xyz="foo".
• X[data~*="foo"]: Targets elements with an attribute that contains a space-separated list of values, where one of the values is “foo”. For instance, X[data~xyz="foo"] applies to elements with data-xyz="eoo goo foo".