CSS
Statements, media queries, selectors,
cascading
Web Applications
Martin Nečaský
Department of Software Engineering,
Faculty of Mathematics and Physics,
Charles University in Prague,
Czech Republic
CSS Statements
Syntax


CSS style sheet consists of statements of two
kinds
rule set
selector {
property-name-1: property-value-1;
…
property-name-N: property-value-N;
}

at-rule
@at-rule-name …;
@at-rule-name {…}
Sample Rule Set
div {
padding: 10px;
background-color: lightblue;
border: 2px solid blue;
}
Sample At-Rules
@import "basic.css";
@import "print-basic.css" print;
@media print {
div {
padding: 10px;
background-color: lightblue;
border: 2px solid blue;
}
}
Namespace At-Rule

namespaces may be declared
 externally in document which uses style sheet
• e.g. XML document using well-know XML namespace
mechanisms
 internally in the style sheet
• @namespace at-rule
@namespace
"http://www.w3.org/1999/xhtml";
@namespace svg
"http://www.w3.org/2000/svg";
CSS MEDIA queries
Media Queries


W3C Candidate Recommendation 27 July
2010
allows styling single web page for different
devices, e.g.




printer
tablet/phone (landscape, portrait)
low resolution laptop
…
Media Queries

where you can use media query?
 media at-rule
• CSS statements inside at-rule are applied only to
specified media
 media attribute of link element in HTML
• CSS statements in linked CSS file are applied only to
specified media
 import at-rule
• imported CSS statements are applied only to specified
media
Media Queries
<media> and (<feature1>) and … and (<featureN>)
Media Queries
<media> and (<feature1>) and … and (<featureN>)

media – stands for media type







screen
print
braile
projection
tv
…
all
Media Queries
<media> and (<feature1>) and … and (<featureN>)


feature-name: value
allowed features:
 width
• value – length
• width of display area of output device
 height
• value – length
• height of display area of output device
 orientation
• value – landscape or portrait
• orientation of display area of output devide
 …

most of them (e.g. width, height) may be supplemented with
min- and max- prefix (to avoid < and >)
Media Queries
/* iPad landscape */
@media all and
(min-device-width: 481px) and
(max-device-width: 1024px) and
(orientation: landscape)
{
/* statements */
}
css_12.html
CSS Selectors
Selectors


selector is chain of one or more sequences of simple
selectors separated by combinators
S0 C1 S1 … Cn Sn
where
 S0, …, Sn are sequences of simple selectors
 C1, …, Cn are combinators (whitespace, >, +, ~ )

“algorithm”:
if (n==0) then return
each element selected by Sn
else return
each element selected by Sn which is in the relationship specified by
Cn to an element selected by S0 C1 S1 … C(n-1) S(n-1)
Selectors



sequence of simple selectors is chain of simple selectors
that are not separated by combinator
S0S1…Sn
where S0, …, Sn are simple selectors
“algorithm”:
 if (n==0) return
• each element selected by Sn
 else return
• each element selected by S0…S(n-1) which is also selected by Sn

simple selector is one of the following:
 type selector, universal selector, attribute selector, class selector,
ID selector, pseudo-class and pseudo-element
Selectors – Few Examples

two simple selectors separated by + combinator
div + div

three simple selectors separated by > combinator
ol#topMenu > li.menuItem[label$="navigation"] > a

two simple selectors separated by whitespace
combinator
tr:last-child
td:not(:first-child):not(:last-child)
Combinators

whitespace combinator:
A
B
 specifies descendant relationship
 selects all elements selected by B which are descendants of any
element selected by A

A > B
> combinator:
 specifies child relationship
 selects all elements selected by B which are child of any element
selected by A

+ combinator:
A + B
 specifies adjacent sibling relationship
 selects all elements selected by B which have same parent as and
immediately follow any element selected by A

~ combinator:
A ~ B
 specifies sibling relationship
 selects all elements selected by B which have same parent as and
follow (not necessarily immediately) any element selected by A
Type Simple Selector
E { … }
 elements with name E in document tree
Do you know the concept of XML namespaces?
Type Simple Selector and Namespaces
ns|E { … }
 elements with name E from namespace with
declared prefix ns
*|E { … }
 elements with name E from any namespace or
without namespace
|E { … }
 only elements without namespace
E { … }
↔ *|E if no default namespace
↔ dns|E if default namespace has prefix dns
Type Simple Selector and Namespaces

see css_03.xml
Universal Simple Selector
* { … }
 all elements in document tree
Universal Simple Selector and
Namespaces
ns|* { … }
 all elements from namespace with declared
prefix ns
*|* { … }
 all elements
|* { … }
 all elements without namespace
* { … }
↔ *|* if no default namespace
↔ dns|* if default namespace has prefix dns
Universal Simple Selector


see css_04.xml
see css_04,5.xml
Attribute Simple Selector
[att] { … }
 all elements with att attribute (whatever
value)
[att=val] { … }
 all elements with att attribute with value
val
[att~=val] { … }
 all elements with att attribute with value
being a sequence of (white space separated)
words containing word val
Attribute Simple Selector
[att^=val] { … }

all elements with att attribute with value starting with val

nothing if val is empty
[att$=val] { … }

all elements with att attribute with value ending with val

nothing if is empty val
[att*=val] { … }

all elements with att attribute with value containing one or more
occurrences of val

nothing if val is empty
[att|=val] { … }

all elements with att attribute with value val or with value
starting with val followed by ‘-’ (intended primarily, but not only,
to matching language codes)
Attribute Simple Selector

see css_05.html
Attribute Simple Selector and Namespaces
[ns|att] { … }
 all elements with att attribute from namespace with
declared prefix ns
[*|att] { … }
 all elements with attribute att from any namespace
or without namespace
[|att] { … }
 all elements with attribute att without namespace
 XML notes:
 default namespace does not apply to attributes
 attribute gains namespace of its element
Class and ID Simple Selector
.val { … } ↔ [class~=val]
 all elements having class attribute with
value being a sequence of (white space
separated) words containing word val
#val { … } ↔ [idattr=val]
 all elements having ID-attribute with value
val
 ID-attribute (idattr) may be given explicitly
(e.g. by DTD or XSD) or implicitly (e.g. HTML
ID attribute)
Class and ID Selector

see css_06.html
Pseudo-Classes
:pseudo-class
 all XML elements which belong to pseudoclass with name pseudo-class
 dynamic pseudo-classes
 classify elements on characteristics which cannot
be deduced from document tree

structural pseudo-classes
 classify elements on their structural relationships
which are not covered by other kinds of simple
selectors
Dynamic Link Pseudo-Classes
:link
 links that have not yet been visited
:visited
 links that have been already visited
Dynamic User Action Pseudo-Classes
:hover
 elements being designated with pointing
device by user
:active
 elements being activated by user
:focus
 elements having focus
Dynamic User Action Pseudo-Classes

see css_07.html
Dynamic Target Pseudo-Class
:target
 link target elements
 applied when link is “activated” by user
<a href="#place">TEXT</a>
<div id="place">TEXT TEXT</div>
Power of Pseudo-Classes
Can you make “switching panels” with CSS?
css_08.html
Structural Pseudo-Classes
:nth-child(an+b)

all elements whose position in the list of all elements with the same
parent can be counted with an+b
 where a and b are fixed integers (positive, negative, 0) given by CSS
developer
 n means ‘iteration variable’ (0,1,2,…)
 first element within its parent has position 1, non-element nodes (text
nodes) are not counted


special values odd and even
examples:
:nth-child(2n+0) – positions 2, 4, 6, …, i.e. even elements
:nth-child(2n+1) – positions 1, 3, 5, …, i.e. odd elements
:nth-child(8n+1) – positions 1, 9, 17, …
:nth-child(even) = :nth-child(2n+0)
:nth-child(odd) = :nth-child(2n+1)
Structural Pseudo-Classes
:nth-child(an+b)
 b may be 0:
:nth-child(3n+0) – positions 3, 6, 9, …
:nth-child(3n) – shortcut for :nth-child(3n+0)

b may be negative:
:nth-child(5n-1) – positions 4, 8, 12, …

a may be 0:
:nth-child(0n+5) – each fifth element within its parent
:nth-child(5) – shortcut for :nth-child(0n+5)

a may be negative:
 only positive positions which can be counted by an+b
target elements
:nth-child(-n+3) – positions 1,2,3
Structural Pseudo-Classes
:nth-last-child(an+b)
 all elements whose position FROM THE END in
the list of all elements with the same parent
can be counted with an+b
 examples:
:nth-last-child(-n+2) – last two elements
in each parent
Structural Pseudo-Classes
Can you make the following “chess-board” with CSS :nthchild, :nth-last-child?
Structural Pseudo-Classes

see css_09.html
Structural Pseudo-Classes
:nth-of-type(an+b), :nth-last-of-type(an+b)

variants of previous which consider only elements with the same
type as the object element
:first-child = :nth-child(1)
:last-child = :nth-last-child(1)
:first-of-type = :nth-of-type(1)
:last-of-type = :nth-last-of-type(1)
:only-child = :first-child:last-child

but lower specificity
:only-of-type = :first-of-type:last-of-type

but lower specificity
:empty

elements without children

only child elements, text, CDATA and entity references count
Negation Pseudo-Class
:not(PS)
 all elements which do not correspond to
pseudo-class PS
Negation Pseudo-Class
Can you make the following “chess-board” (only the boundary
rows and columns are white)?
Negation Pseudo-Class

see css_10.html
Pseudo-Elements
:first-letter
:first-line
Pseudo-Elements
:before
:after
 intended for generated content
 generated content is content which does not come
from document tree
 e.g. numbered list or numbering chapters
 generated content is specified by content property
with value:





string
uri
counter
attr(X)
… and special values for generating quotes
Pseudo-Elements

see css_11.html
CSS Cascading
Cascading


every element in document tree must have value
for every property that applies to target media
type
three different sources of style sheets:
 author
• web developer who creates style sheets and associates them
with documents
 user
• user agent may allow users to specify their own style
information (e.g. “everything bigger”)
 user agent
• default style sheets of user agent which allow displaying
non-styled elements (e.g. default HTML or default XML)
Cascading

cascade assigns weight to each property in each
style sheet statement (1 is lowest weight):
1.
2.
3.
4.
5.


user agent properties
user properties
author properties
author important properties
user important properties
if element in document tree may have more
values for the same property the one with
highest weight is applied
important properties are those followed by
!important keyword
Cascading


if element in document tree may have more values for
the same property with the same cascading weight
select the one with the highest specificity
specificity of property declaration in statement is
counted on the base of the following three values:
 A = 1 if declaration is in style att, 0 otherwise
 B = number of ID selectors in statement selector
 C = number of class selectors, attribute selectors and
pseudo-classes in statement selector
 D = number of type selectors and pseudo-elements in
statement selector
 (universal selector is ignored)

specificity = ABCD
Cascading
td
td:hover
td:nth-child(-n+2)
tr:nth-child(2n) td:nth-child(2n+1)
(B=0, C=0, D=1  specificity 0001)
(B=0, C=1, D=1  specificity 0011)
(B=0, C=1, D=1  specificity 0011)
(B=0, C=2, D=2  specificity 0022)
/* almost winner */
tr:nth-child(2n) td:nth-child(2n+1) {
background-color: black;
}
/* looser */
td:nth-child(-n+2) {
background-color: orange;
}
/* beats all */
td:hover {
background-color: pink !important;
}
Inheritance

if element does not have property value it may inherit
it from its parent in document tree
 Not all properties are inherited

in general
 text related properties are inherited (e.g. color, font)
 box related properties are not inherited (e.g. border,
float)

keyword inherit
 property is inherited (even if it is not inherited by default)
*
}
{
border: inherit;
Thanks for your attention