The World of CSS Selectors

https://www.canva.com/design/DAEANYqyik4/tdD7T7i698xhdPQUS_nrtQ/view?utm_content=DAEANYqyik4&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton#6

1
2
3

h1, h2{
    color: white;
}

The ID Selector

https://coolors.co/palettes/trending

#lagout{
    color: orange;
    height: 200px;
}

The class Selector

1	<a class="tag" href="#puppies">Puppies</a>

1
2
3

.tag{
    background-color: #e63946;
}

Descendant Selector

1
2
3

li a{
    color: teal;
}

Adjacent Selector

1
2
3

h1 + p{
    color: red;
}

Select only the paragraphs that are immidiately preceded by an <h1>

Direct Child

1
2
3

div > li{
    color: white;
}

Select only the <li>‘s that are direct children of a <div> element

Attribute Selector

Select all input elements where the type attribute is set to “text”

input[type="text"]{
    width: 300px;
    color: yellow;
}

1
2
3

a[href*="google"]{
    color: magenta;
}

class is one attribute, so as id.
href*=”google” - Fuzzier matching

PSEUDO classes

keyword added to a selector that specifies a special state of the selected element(s)

:active
:checked
:first
:first-child
:hover
:not()
:nth-child()
:nth-of-type()

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

PSEUDO ELEMENTS

Keyword added to a selector that lets you style a particular part of selected element(s)

::after
::before
::first-letter
::first-line
::selection

SPECIFICITY

Specificity is how the brower decides which rules to apply when multiple rules could apply to the same element. It is a measure of how specific a given selector is. The more specific selector “wins”.

1	ID > Class > Element

How to calculate the importance

ID selector: 100
Class, Attribute, Pseudo-Class, Selectors: 10
Element, Pseudo-Element, Selectors: 1

The combination of the things above:

For example

1
2
3

nav a.active{
    color: orange;
}

0*100+1*10+2*1

https://specificity.keegan.st/

!important tag is superb every calculation above.

CSS Inheritance

1
2
3

button{
    color: inherit;
}