05 Selectors
-
Upload
baltazak36 -
Category
Documents
-
view
222 -
download
0
Transcript of 05 Selectors
-
8/19/2019 05 Selectors
1/32
Selectors
Web Technologies IArtūrs Lavrenovs
adopted from Krišs Rauhvargers
-
8/19/2019 05 Selectors
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
-
8/19/2019 05 Selectors
3/32
Self1training tool
• A game b$ Lu2e 3achols2i
# http())flu2eout+github+io
,
-
8/19/2019 05 Selectors
4/32
FREQUENTLY USEDSELECTORS
4een there for $ears" supported in ever$ bro*ser
5
-
8/19/2019 05 Selectors
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
-
8/19/2019 05 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
-
8/19/2019 05 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/19/2019 05 Selectors
8/32
OPERATIONS WITHSELECTION SETS
@
-
8/19/2019 05 Selectors
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'
-
8/19/2019 05 Selectors
10/32
!inding subsets
• ,7elector1-
-
8/19/2019 05 Selectors
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
-
8/19/2019 05 Selectors
12/32
OTHER SELECTOR TYPES
4een there for $ears" bro2en in some old bro*sers
0/
-
8/19/2019 05 Selectors
13/32
-
8/19/2019 05 Selectors
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
-
8/19/2019 05 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/
-
8/19/2019 05 Selectors
16/32
PSEUDOCLASSES ANDPSEUDOELE!ENTS
-
8/19/2019 05 Selectors
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<
-
8/19/2019 05 Selectors
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
-
8/19/2019 05 Selectors
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
-
8/19/2019 05 Selectors
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
-
8/19/2019 05 Selectors
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
-
8/19/2019 05 Selectors
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/
-
8/19/2019 05 Selectors
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
-
8/19/2019 05 Selectors
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/
-
8/19/2019 05 Selectors
25/32
SEQUENCE OF APPLYIN' CSSRULES
-
8/19/2019 05 Selectors
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}
-
8/19/2019 05 Selectors
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/
-
8/19/2019 05 Selectors
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
-
8/19/2019 05 Selectors
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
-
8/19/2019 05 Selectors
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
-
8/19/2019 05 Selectors
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
-
8/19/2019 05 Selectors
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
,/