3.0 KiB

Исходник Постоянная ссылка Ответственный История

CSS Selectors

CSS (Cascading Style Sheets) apply style, formatting, and layout to a page. Items to style are identified by a selector.

Common Selectors

The three common selectors are:

Element
Class name
ID

You can find a CodePen example on common selectors here.

Scoring

But what happens when multiple selectors try to apply to one element?

Tag Name < Class Name < ID Else last write

You can find a CodePen example on scoring here

Combinators

You can make style changes to elements based on the hierarchy of the HTML too, with combinators. This includes:
parent child - All children
parent > child- Only a direct child
sibling1 ~ sibling2 - Any sibling
sibling1 + sibling2- Only an adjascent sibling

You can find a CodePen example on combinators here

Psuedo Classes

Style is applied to elements based on the state or location of the element. The style for this is:
element:psuedo-class

And some examples include:
a:visited - style applied to links that have been visited by this person before
a:hover - style applied to links that are hovered over

You can find a CodePen example on psuedo-classes here

Psuedo Elements

Style is applied to elements based on their content. The style for this is:
element::psuedo-element

And some examples include:
p::first-letter - style applied to the first letter of any paragraph
p::selection - style applied to text that is selected by the user

You can find a CodePen example on psuedo-elements here