Selector

Topics

1. CSS selectors
2. Selector priority
3. Combinator

CSS selectors

CSS selectors are the way to declare the style on specific element and have several types such as global, class, id, pseudo-element, pseudo-class, attribute selector, inline style.

Pseudo-elements and Pseudo-classes.

Pseudo-elements

• Describing a special hidden element such as ::before ::after.

Pseudo classes

• Describing a special ui state. For example, the ::first-line pseudo-element targets only the first line of an element specified by the selector.

pseudo-elements list

• ::after

• ::before

• ::first-letter

• ::first-line

• ::selection

• ::backdrop

• ::placeholder

• ::marker

• ::spelling-error

• ::grammar-error

pseudo class

• :active

• :any

• :checked

• :default

• :dir()

• :disabled

• :empty

• :enabled

• :first

• :first-child

• :first-of-type

• :fullscreen

• :focus

• :hover

• :indeterminate

• :in-range

• :invalid

• :lang()

• :last-child

• :last-of-type

• :left

• :link

• :not()

• :nth-child()

• :nth-last-child()

• :nth-last-of-type()

• :nth-of-type()

• :only-child

• :only-of-type

• :optional

• :out-of-range

• :read-only

• :read-write

• :required

• :right

• :root

• :scope

• :target

• :valid

• :visited

Attribute selectors

Attribute selectors are the type of css selector and allows to set CSS rule on attribute name or its value. For example, if the href attribute starts from http you can change the color of the link.

Difference between classes and IDs in CSS?

Put simply, classes and IDs are different from reusability and priority.

Reusability

Classes can be reused on multiple DOM elements and set multiple times on one DOM element whereas ID is only one element and one time.

- class

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

- ID

<div id="app-page"></div>

Priority

Priority is different as well. One ID is stronger than one class.

Best practice is that using CSS-Classes to style for the sake of scalability and using Id to manipulate single DOM from JS in order not to manipulate wrong DOMs.

https://codepen.io/keioka0828/pen/PBOXXL

Selector priority

Selector priority is the mechanism that determined which css rule to be applied on certain element. Why this selector priority mechanism exists is that CSS style rule could be duplicated on one element.

<div class="page">
  <h1 class="title">Welcom</h1>
</div>

.page {
  color: red;
}

.title {
  color: blue;
}

.page .title {
  color: yellow;
}

https://codepen.io/keioka0828/pen/gjXqYy

• !Important - 1000000000000000

The !important value appended a CSS property value is an automatic win. It overrides even inline styles from the markup. The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value otherwise. You could think of it as adding 10000 to the specificity value.

.title {
  color: white !important;
}

• Inline style attribute - 1000

<div style="color:red"></div>

• ID - 100

#main-title-page {
  color: red;
}

• Class, psuedo-class, attributes - 10

.title {
  color: blue;
}

.title:hover {
  color: yellow;
}

div[rel="phone"] {
  color: pink;
}

• element - 1

div {
  color: blue;
}

• The universal selector (*) has no specificity value (0,0,0,0)

* {
  color: black;
}

The negation pseudo-class :not is not considered a pseudo-class in the specificity calculation. But selectors placed into the negation pseudo-class count as normal selectors when determining the count of selector types.

.page .title:not(h2) {
  color: yellow;
}

// Win
.page h1.title {
  color: pink;
}

Combinators

Combinators are used to combine css selectors and combinators sum specificities of selectors.

1. div, p (this is separation so not sum specificities but applied individual specificity)
   • <div> and <p>
2. div p (Descendant combinator)
   • All <p> under <div>
3. div > p (Child combinator) - [Codepen]
4. div + p (Adjacent sibling combinator) - [Codepen]
5. div ~ p (General sibling combinator) - [Codepen]

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

https://www.w3schools.com/cssref/sel_element_gt.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/:not