NWTC WET a03

6 interesting almanac selectors/properties

Selectors -

The :has() selector

The :has() selector selects any element that is passed into the parenthesis, otherwise known as an Argument.

For example, the SVG below is only styled because it exists inside of a button tag, per the :has() selector.

:has() on CanIUse

The :target selector

The :target selector styles a given piece of content when a hash in the url matches the id of an element.

Once the anchor above has been clicked, the :target selector makes the anchor's background color white.

:target on CanIUse

:last-child

The last-child selector styles the last item in a specific grouping. In our cases, we will be using paragraph elements.

As you can see, the final paragraph tag has the text color reversed, and the background color turned black, simply because it is in a paragraph element and is the final paragraph in the unordered list.

last-child on CanIUse

Properties -

Z-Index

The Z-index property determines the stacking position of elements. If 2 elements are overlapping with each other, the one with a higher z-index value will be above the one with a lower value.

z-index on CanIUse

Gap

Gap determines the amount of space between a grouping of items. These items must exist in Grid or Flex, but gap will allow you to determine the amount of space, which can be done in pixels or percentages.

Gap on CanIUse

Direction

Direction determines what direction content moves within an element. The only options are either Left to right, Right to left, or inheriting the value from the parent element.

Direction on CanIUse

Selector examples

:has()

target

Watch this change

click here

last-child

Paragraph 1

Paragraph 2

Paragraph 3

Property Examples

z-index

Gap

Direction

The dots at the "end" of this line are going right to left via Direction...