Css Selectors

1
Igor Ognichenko
Node.js Developer at FireBlink
Github: RobinCk
Linkedin: igor-ognichenko

4
CSS it's easy
a { background-color: green; }
selector property value
declaration
start
declaration
end
property/value
separator
declaration
separator

5
● Universal Selector (*)
● Element Type Selector (div)
● Class Selector (.red)
● ID Selector (#element-id)
● Attribute Selector ([data-attr=”1”])
● Selector Grouping (div.red, span.red)
● Combinators (ul > li)
● Pseudo-classes (a:hover, a:active)
● Pseudo-elements (span::first-letter, span::before)
CSS Selectors

Advanced
6
#navigation ul.menu *:first-child > a[rel=nofollow]::before
id
class
any element
pseudo-class
element
combinator pseudo-element
attribute

“
Calculating CSS Specificity Value
7

8
style=”” #container .selector div *
Specificity
pseudo-class attribute pseudo-element

9
1000 100 10 1 0
Specificity
Note: The :not() sort-of-pseudo-class adds no specificity by
itself, only what's inside the parens is added to specificity value.
style=”” #container .selector div *
pseudo-class attribute pseudo-element

10
● The universal selector (*) has no specificity value (0)
● Pseudo-elements (e.g. :first-line) get 1 unlike their psuedo-
class brethren which get 10
● The pseudo-class :not() adds no specificity by itself, only
what's inside it's parentheses.
● 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.

11
id
class
any element
pseudo-class
element
attribute

12
https://specificity.keegan.st/ - Specificity calculator
id
class
any element
pseudo-class
element
attribute

13
<style type="text/css">
.green {
color: green;
}
.red {
color: red;
}
</style>
<div class="red green">
What color am I?
</div>

14
.green {
color: green;
}
.red {
color: red;
}
</style>
What color am I?
</div>

15
div.green {
color: green;
}
.red {
color: red;
}
</style>
What color am I?
</div>

16
div.green {
color: green;
}
.red {
color: red;
}
</style>
What color am I?
</div>

17
.red.red {
color: red;
}
div.green {
color: green;
}
</style>
What color am I?
</div>

18
.red.red {
color: red;
}
div.green {
color: green;
}
</style>
What color am I?
</div>

19
1. Importance (!Important)
2. Specificity
3. Source and order
Cascade is an algorithm that defines what value properties will be applied if it
tries it set several rules from different sources. This is the core CSS, or
Cascading Style Sheets.
Cascade

22
1. redefine inline style
2. redefine other !important
Case for usage
!important

Css Selectors

More Related Content

What's hot (19)

Similar to Css Selectors (20)

Recently uploaded (20)

Css Selectors