Professional Documents
Culture Documents
Web Technologies I
Artrs Lavrenovs
adopted from Kris Rauhvargers
ul:not(.thingList
)
http://www.w3.org/TR/CSS21/selector.html
Self-training tool
A game by Luke Pacholski
http://flukeout.github.io
FREQUENTLY USED
SELECTORS
4
Selector by element ID
Any element having an ID can be identified by a
selector
This selector returns 0 to 1 elements
(ID must be unique!)
Syntax
element_type#element_id
e.g., div#main
Selector by class
Class selector finds all elements belonging to a particular class
(defined by HTML attribute "class" )
This selector returns a list of elements.
element_type.class_name
e.g., div.infoBox
http://www.w3.org/TR/CSS21/selector.html#class-html
OPERATIONS WITH
SELECTION SETS
8
For instance:
h1, h2, h3, h4 {font-family: Arial;}
Sets Arial font to h1, h2, h3 and h4 headings
Finding subsets
[Selector1]<space>[Selector2]
First executes Selector1, then runs Selector2 on its
results.
div.floater
http://www.w3.org/TR/CSS21/selector.html#descendant-selectors
12
Parent-child selector
Syntax: [ParentSelector] > [ChildSelector]
Looks for all ChildSelector elements that are
direct ParentSelector offsprings
For instance
div#main > div {border:1px solid red;}
DIV#main
div.directchild
div.innerdiv_not_direct_child
div.directchild
http://www.w3.org/TR/CSS21/selector.html#child-selectors
Attribute selectors
[attribute=value]
looks for elements which have an attribute with exactly that value
e.g., table[border=1]
[attribute*=value]
Attribute contains the value
[attribute~=value]
Contains the word "value"
e.g., a[class~=external]
=== a.external
[attribute^=my]
Attribute value starts with my
[attribute$=ing]
Attribute value ends with ing
[attribute]
looks for elements which have attribute at all
e.g., img[alt]
(only these img elements that have "alt" defined)
a[title]
Example: http://jsfiddle.net/naivists/rWNj4/
http://www.w3.org/TR/CSS21/selector.html#attribute-selectors
PSEUDO-CLASSES AND
PSEUDO-ELEMENTS
a:visited
hyperlinks already visited
a {text-decoration:none;}
a:link {color:black}
a:visited {color:#CCC}
a:hover
{text-decoration:underline}
a:hover
hyperlink with mouse over
it
a:active
user has already clicked
(but not yet navigated
away)
Pseudo-elements
:first-{something}
element:first-line
finds the element, then picks only the first line
of that
element:first-letter
looks for element, then picks only the first
letter of it
Example
p:first-line {text-transform:uppercase}
p:first-letter {font-size:100px;}
http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo
:something-child pseudo-clases:
first-child
Pseudo-class element:first-child runs a
regular selector, looking for element, then picks
only the first offsprings
For instance
ul.thingList li:first-child
returns only the first LI element, but not the
second,third, etc.
p:first-child
returns all paragraph elements that are first
offsprings (of whatever the parent)
http://www.w3.org/TR/CSS21/selector.html#first-child
http://docs.webplatform.org/wiki/css/selectors/pseudo-classes/Structural_pseudo-classes#:nth-of-type.28.29_pseudo-class
:nth-child(n)
:nth-of-type(n)
:nth-last-child(n)
:nth-last-of-type(n)
n can be
keyword: odd, even
number: item number multiplier
formula: multiplier + number
Demo: http://jsfiddle.net/naivists/Je9aX/
20
:not(p)
Everything but not the paragraph elements
21
:target selector
Captures the element which is targeted by page
locations hash part
http://example.com/#blabla
<h3 id=blabla>I am captured</h3>
<h3 id=yolo>And I am not!</h3>
Example:
http://jsfiddle.net/naivists/v3w8f/
Transitions
Dynamic selectors (:hover, :target, :focus) respond to user
interaction
You can change some properties for the dynamic state
e.g. background-color, padding etc.
:disabled, :enabled
captures disabled/enabled elements
:checked
captures checked options/checkboxes
Example of :focus
http://jsfiddle.net/naivists/TqvzV/
24
Basic principles
Logical sequence: CSS rules are applied in the
order they are loaded by the browser
p {font-size:10px}
p {font-size:20px} /*Rewrites the previous
declaration*/
Answer: http://jsfiddle.net/5hq2m/
27
Cascade principle
Finds all declarations which could apply to the particular attribute of
some element
Separates the declarations:
!important rules from regular ones;
by origin (document author, user stylesheet, browser built-in)
30
Specificity calculation
Selector rule
a#myLink
div#aside p#intro a
div.aside p.intro.article a
<a class="myClass"
style="color:red">
32