05 selectors

8/19/2019 05 Selectors

1/32

Selectors

Web Technologies IArtūrs Lavrenovs

adopted from Krišs Rauhvargers


2/32

What does a selector do?

• A selector describes

a rule for finding

specific elements in

the DO tree• !or instance"

# all elements of t$pe %L

# & that are not of class

'thingList'

ul:not(.thingList

)

http())***+*,+org)T-).SS/0)selector+html

http://www.w3.org/TR/CSS21/selector.htmlhttp://www.w3.org/TR/CSS21/selector.html


3/32

Self1training tool

• A game b$ Lu2e 3achols2i

# http())flu2eout+github+io

,


4/32

FREQUENTLY USEDSELECTORS

4een there for $ears" supported in ever$ bro*ser

5


5/32

Selector b$ element type

• Selector consisting of onl$ element t$pe name *ill find all elements of the particular t$pe

• UL {color:red}

• finds all %L elements• This selector does not care about nesting(

# OuterInner

# DIV {border:1px solid green;}

• will render borders on both DIV-s

• %niversal selector 6 finds elements of an$ t$pe# {!"rgin:#}

• resets margins to all elements in document

http())***+*,+org)T-).SS/0)selector+html7t$pe1selectors

http://www.w3.org/TR/CSS21/selector.html%23type-selectorshttp://www.w3.org/TR/CSS21/selector.html%23type-selectors


6/32

Selector b$ element ID

• An$ element having an ID can be identified b$ a

selector

• This selector returns 8 to 0 elements

9ID must be uni:ue;<• S$nta=

# ele!ent$t%pe&ele!ent$id• e+g+" div&!"in

• In most cases element t$pe is redundant+ -emove

it(

&ele!ent$id

• e+g+" &!"inhttp())***+*,+org)T-).SS/0)selector+html7id1selectors

http://www.w3.org/TR/CSS21/selector.html%23id-selectorshttp://www.w3.org/TR/CSS21/selector.html%23id-selectors


7/32

Selector b$ class

• .lass selector finds all elements belonging to a particular class

9defined b$ >TL attribute 'class' <

• This selector returns a list of elements+

# element_type.class_name

• e+g+" div'in(o)ox• If element t$pe is not relevant" s2ip it+

# e+g+( 'in(o)ox

# do not forget the period s$mbol;

• lement ma$ have multiple classes+ This can be selected as *ell(

• bl"bl"

# li'n"vig"tion'selected• finds all elements belonging to both 'navigation' and 'selected' classes

http())***+*,+org)T-).SS/0)selector+html7class1html

http://www.w3.org/TR/CSS21/selector.html%23class-htmlhttp://www.w3.org/TR/CSS21/selector.html%23class-html


8/32

OPERATIONS WITHSELECTION SETS

@


9/32

erging the selected sets

• If multiple element sets 9selector 'results'<

have to be merged" selectors can be *ritten

after each other 9separated b$ a comma< (

,selector1-. ,selector-. ,selector0-{'''rule bod%

}

•!or instance(# 1. . 0. 2 {(ont3("!il%: 4ri"l;}

• Sets Arial font to h0" h/" h, and h5 headings

# 0. p'!ust5e"d {(ont36eigt:bold}

• Applies both to >, elements" and to such paragraph elements that

have class 'must-ead'


10/32

!inding subsets

• ,7elector1-


11/32

!inding subsets 9/<

• Subset selector can be used in multiple

levels" each level ma$ be of different 2ind(

# div&e"d ul'!enu li {color:6ite}

• In DI element *ith IDB'head' loo2s for such ul

elements that have .LASSB'menu'" then finds all

LI elements

• sets color to *hite on these particular elements


12/32

OTHER SELECTOR TYPES

4een there for $ears" bro2en in some old bro*sers

0/


13/32


14/32

'Ce=t' element selector

• ,8reviousle!ent-,"rgetle!ent-

# Applies to TargetlementE" if it follo*s directl$ after

the 3reviouslementE

• %seful for describing 'first paragraph in ne*chapter' and other similar cases

• !or instance

=1 8 {color:blue}

# !irst paragraph after >0 level chapter is blue

=1= {!"rgin3top:#px}

# subtitle is closer to a title than other te=t+

http())***+*,+org)T-).SS/0)selector+html7adFacent1selectors

http://www.w3.org/TR/CSS21/selector.html%23adjacent-selectorshttp://www.w3.org/TR/CSS21/selector.html%23adjacent-selectors


15/32

Attribute selectors

• ,"ttribute*v"lue-

# loo2s for elements *hich have an attribute *ith e=actl$ that value

# e+g+" table[border!"

• ,"ttribute**v"lue-

# Attribute contains the value

• ,"ttribute~*v"lue-

# .ontains the *ord 'value'

# e+g+" ",cl"ss*extern"l- *** "'extern"l

• ,"ttribute?*!%-

# Attribute value starts *ith Gm$H

• ,"ttribute@*ing-

# Attribute value ends *ith GingH

• ,"ttribute-

# loo2s for elements *hich have attribute at all

# e+g+" i!g,"lt-• 9onl$ these img elements that have 'alt' defined<

• ",title-

# #$ample: http:%%&s'iddle.net%naiists%r*&+%

http())***+*,+org)T-).SS/0)selector+html7attribute1selectors

http://jsfiddle.net/naivists/rWNj4/http://jsfiddle.net/naivists/rWNj4/http://www.w3.org/TR/CSS21/selector.html%23attribute-selectorshttp://www.w3.org/TR/CSS21/selector.html%23attribute-selectorshttp://jsfiddle.net/naivists/rWNj4/http://jsfiddle.net/naivists/rWNj4/


16/32

PSEUDOCLASSES ANDPSEUDOELE!ENTS


17/32

Selectors for h$perlin2s

• a:link# all h$perlin2s that have

not $et been visited

• a:visited # h$perlin2s alread$ visited

• a:hover# h$perlin2 *ith mouse over

it

• a:active# user has alread$ clic2ed

9but not $et navigated

a*a$<

" {text3decor"tion:none;}

":linA {color:bl"cA}

":visited {color:&999}

":over{text3decor"tion:underline}

.orrect order of selectors( Lin2" isited" >over" Active 9Loe" >Ate<


18/32

3seudo1elements

:first-{something}

• ele!ent:first-line

# finds the element" then pic2s onl$ the first line

of that

• ele!ent:first-letter

# loo2s for element" then pic2s onl$ the first

letter of it

• =ample# p:(irst3line {text3tr"ns(or!:upperc"se}

# p:(irst3letter {(ont3siBe:1##px;}

http())***+*,+org)T-).SS/0)selector+html7first1line1pseudo

http://www.w3.org/TR/CSS21/selector.html%23first-line-pseudohttp://www.w3.org/TR/CSS21/selector.html%23first-line-pseudo


19/32

"somethingc#$l% pseudo1clases(

first1child

• 3seudo1class element:first-child runs a

regular selector" loo2ing for element " then pic2s

onl$ the first offsprings

• !or instanceul'tingList li:(irst3cild

# returns onl$ the first LI element" but not the

second"third" etc+

# p:(irst3cild

# returns all paragraph elements that are first

offsprings 9of *hatever the parent<

http())***+*,+org)T-).SS/0)selector+html7first1child

http://www.w3.org/TR/CSS21/selector.html%23first-childhttp://www.w3.org/TR/CSS21/selector.html%23first-child


20/32

Other :somethingc#$l% classes

• .SS, adds other selectors(

# :onl%3cild

# :l"st3cild

• !ormula1based child selectors• http())docs+*ebplatform+org)*i2i)css)selectors)pseudo1classes)Structuralpseudo1classes7(nth1of1t$pe+/@+/Jpseudo1class

# :nt3cildCn# :nt3o(3t%peCn

# :nt3l"st3cildCn

# :nt3l"st3o(3t%peCn

# GnH can be

• 2e$*ord( odd" even

• number( item number multiplier

• formula( multiplier K number

• Demo( http())Fsfiddle+net)naivists)eJaM)

/8

http://docs.webplatform.org/wiki/css/selectors/pseudo-classes/Structural_pseudo-classes%23:nth-of-type.28.29_pseudo-classhttp://jsfiddle.net/naivists/Je9aX/http://jsfiddle.net/naivists/Je9aX/http://jsfiddle.net/naivists/Je9aX/http://jsfiddle.net/naivists/Je9aX/http://jsfiddle.net/naivists/Je9aX/http://jsfiddle.net/naivists/Je9aX/http://jsfiddle.net/naivists/Je9aX/http://docs.webplatform.org/wiki/css/selectors/pseudo-classes/Structural_pseudo-classes%23:nth-of-type.28.29_pseudo-classhttp://docs.webplatform.org/wiki/css/selectors/pseudo-classes/Structural_pseudo-classes%23:nth-of-type.28.29_pseudo-classhttp://docs.webplatform.org/wiki/css/selectors/pseudo-classes/Structural_pseudo-classes%23:nth-of-type.28.29_pseudo-classhttp://docs.webplatform.org/wiki/css/selectors/pseudo-classes/Structural_pseudo-classes%23:nth-of-type.28.29_pseudo-classhttp://docs.webplatform.org/wiki/css/selectors/pseudo-classes/Structural_pseudo-classes%23:nth-of-type.28.29_pseudo-classhttp://docs.webplatform.org/wiki/css/selectors/pseudo-classes/Structural_pseudo-classes%23:nth-of-type.28.29_pseudo-classhttp://docs.webplatform.org/wiki/css/selectors/pseudo-classes/Structural_pseudo-classes%23:nth-of-type.28.29_pseudo-class


21/32

Cegation1 (not selector

• Selects ever$thing else but the e=pression

mentioned in selector(

• div:notC&!"in

# ver$ div but not the GmainH

• :notCp

# ver$thing but not the paragraph elements

/0


22/32

(target selector

• .aptures the element *hich is targeted b$ page

locationNs hash part

# http())e=ample+com)7&la&la

I "! c"ptured

4nd I "! notG

• =ample(

# http())Fsfiddle+net)naivists)v,*@f)

• %sable for animations 9using the GtransitionH propert$<

# http())Fsfiddle+net)naivists)CMW!)

# http())css1tric2s+com)on1target)

//

http://jsfiddle.net/naivists/v3w8f/http://jsfiddle.net/naivists/v3w8f/http://css-tricks.com/on-target/http://css-tricks.com/on-target/http://css-tricks.com/on-target/http://css-tricks.com/on-target/http://css-tricks.com/on-target/http://css-tricks.com/on-target/http://css-tricks.com/on-target/http://jsfiddle.net/naivists/v3w8f/http://jsfiddle.net/naivists/v3w8f/


23/32

Transitions

• D$namic selectors 9:over. :t"rget. :(ocus< respond to user

interaction

• Pou can change some properties for the d$namic state

# e+g+ Gbac2ground1colorH" GpaddingH etc+

• GTransitionH creates an animation bet*een the current state and the

ne* state

• >o* to use(# https())developer+moQilla+org)en1%S)docs).SS)Tutorials)%sing.SStransitions

• What can be animated# https())developer+moQilla+org)en1%S)docs).SS).SSanimatedproperties

• Simple e=ample of transitions

# http())Fsfiddle+net)naivists)-R$en)

/,

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitionshttps://developer.mozilla.org/en-US/docs/CSS/CSS_animated_propertieshttp://jsfiddle.net/naivists/RZyen/http://jsfiddle.net/naivists/RZyen/http://jsfiddle.net/naivists/RZyen/http://jsfiddle.net/naivists/RZyen/http://jsfiddle.net/naivists/RZyen/http://jsfiddle.net/naivists/RZyen/http://jsfiddle.net/naivists/RZyen/http://jsfiddle.net/naivists/RZyen/http://jsfiddle.net/naivists/RZyen/https://developer.mozilla.org/en-US/docs/CSS/CSS_animated_propertieshttps://developer.mozilla.org/en-US/docs/CSS/CSS_animated_propertieshttps://developer.mozilla.org/en-US/docs/CSS/CSS_animated_propertieshttps://developer.mozilla.org/en-US/docs/CSS/CSS_animated_propertieshttps://developer.mozilla.org/en-US/docs/CSS/CSS_animated_propertieshttps://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitionshttps://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitionshttps://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitionshttps://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions


24/32

!orm element selectors

• :(ocus

# captures the element currentl$ in focus

• :dis"bled. :en"bled

# captures disabled)enabled elements

• :cecAed

# captures chec2ed options)chec2bo=es

# =ample of (focus• http())Fsfiddle+net)naivists)T:vQ)

/5

http://jsfiddle.net/naivists/TqvzV/http://jsfiddle.net/naivists/TqvzV/http://jsfiddle.net/naivists/TqvzV/


25/32

SEQUENCE OF APPLYIN' CSSRULES


26/32

4asic principles

• Logical se:uence( .SS rules are applied in the

order the$ are loaded b$ the bro*ser# p {(ont3siBe:1#px}

#p {(ont3siBe:#px} /5e6rites te previousdecl"r"tion/

• -ules *hich have Gi!port"nt flag" override

other rules

• +++but this does not cover all cases+section "side p {(ont3siBe:1#px;}

bod% p {(ont3siBe:#px}


27/32

stimate the color

/

What is the color of te=t GDemonstration of ho* it *or2sH?

Ans*er( http())Fsfiddle+net)h:/m)

http://jsfiddle.net/5hq2m/http://jsfiddle.net/5hq2m/http://jsfiddle.net/5hq2m/http://jsfiddle.net/5hq2m/http://jsfiddle.net/5hq2m/


28/32

.ascade principle

• !inds all declarations *hich could appl$ to the particular attribute of

some element

• Separates the declarations( – Gi!port"nt rules from regular onesU

# b$ origin 9document author" user st$lesheet" bro*ser built1in<

• Orders the declarations

# bro*ser built1in rules

# user rules

# document author regular rules

# document author ;important rules

# user Gi!port"nt rules• -ules of the same importance are sorted b$ specificit$U more specific

rules are stronger

• If specificit$ is the same" then applied in load se:uence

http())***+*,+org)T-).SS/0)cascade+html7cascading1order

http://www.w3.org/TR/CSS21/cascade.html%23cascading-orderhttp://www.w3.org/TR/CSS21/cascade.html%23cascading-order


29/32

.alculating the specificit$

• Specificit$ is defined as a number se:uence

a1b1c1d+ Specificities are sorted b$ position

# a( if the declaration is in elementVs 'st$le'

attribute 9then aB0< or a regular selector 9aB8<# b( ho* man$ id1s the selector contains

# c( ho* man$ other attributes" classes and)or

pseudo1classes the selector contains

# d( ho* man$ elements or pseudo1elements the

selector contains

http())***+*,+org)T-).SS/0)cascade+html7specificit$

http://www.w3.org/TR/CSS21/cascade.html%23specificityhttp://www.w3.org/TR/CSS21/cascade.html%23specificity


30/32

Specificit$ e=plained b$ StarWars terms

• http())***+stuffandnonsense+co+u2

)archives)images)specificit$*ars18v/+Fpg

,8

http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpghttp://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpghttp://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpghttp://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpghttp://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg


31/32

Specificity calculation

Selector rule a b c d

a#myLink 0 1 0 1

div#aside p#intro a 0 2 0 3

div#aside p#intro a.myClass 0 2 1 3

div.aside p.intro.article a 0 0 3 3


32/32

Specificit$( the conse:uences

• Cever use Gi!port"nt rules

# ItVs ver$ hard to override them

• Cever use inline st$les

# Pou canVt override them at all

,/

05 selectors

Documents