Selectors

Web Technologies I
Kris Rauhvargers, 2014

What does a selector do?

A selector describes
a rule for finding
specific elements in
the DOM tree
For instance,
all elements of type UL
that are not of class
"thingList"

ul:not(.thingList)

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

Self-training tool
A game by Luke Pacholski
http://flukeout.github.io

Been there for years, supported in every browser

FREQUENTLY USED
SELECTORS
4

Selector by element type

Selector consisting of only element type name
will find all elements of the particular type
UL {color:red}
finds all UL elements

This selector does not care about nesting:

<div>Outer<div>Inner</div></div>
DIV {border:1px solid green;}
will render borders on both DIV-s

Universal selector * finds elements of any type

* {margin:0}
resets margins to all elements in document

http://www.w3.org/TR/CSS21/selector.html#type-selectors

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 !

In most cases element type is redundant.

Remove it:
#element_id
e.g., #main

http://www.w3.org/TR/CSS21/selector.html#id-selectors

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

If element type is not relevant, skip it.

e.g.: .infoBox
do not forget the period symbol!

Element may have multiple classes. This can be selected as well:

<li class="navigation">blabla</li>
<li class="navigation selected">blabla</li>
li.navigation.selected!
finds all elements belonging to both "navigation" and "selected" classes

http://www.w3.org/TR/CSS21/selector.html#class-html

OPERATIONS WITH
SELECTION SETS
8

Merging the selected sets

If multiple element sets (selector "results")
have to be merged, selectors can be written
after each other (separated by a comma) :
[selector1], [selector2], [selector3]
{
...rule body
}

For instance:
h1, h2, h3, h4 {font-family: Arial;}
Sets Arial font to h1, h2, h3 and h4 headings

H3, p.mustRead {font-weight:bold}

Applies both to H3 elements, and to such paragraph elements that

have class "mustRead"

Finding subsets
[Selector1]<space>[Selector2]
First executes Selector1, then runs Selector2 on its
results.
div.floater
!

!
p

http://www.w3.org/TR/CSS21/selector.html#descendant-selectors

Finding subsets (2)

Subset selector can be used in multiple
levels, each level may be of different kind:
div#head ul.menu li {color:white}
In DIV element with ID="head" looks for such ul
elements that have CLASS="menu", then finds all
LI elements
sets color to white on these particular elements

Been there for years, broken in some old browsers

OTHER SELECTOR TYPES

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 elements inside

"main" DIV element
get a red border
deeper nested DIV
elements do not!

DIV#main
div.directchild
div.innerdiv_not_direct_child
div.directchild

http://www.w3.org/TR/CSS21/selector.html#child-selectors

"Next" element selector

[PreviousElement]+[TargetElement]
Applies to [TargetElement], if it follows directly
after the [PreviousElement]

Useful for describing "first paragraph in new

chapter" and other similar cases
For instance
H1 + P {color:blue}
First paragraph after H1 level chapter is blue
H1+H2 {margin-top:0px}
subtitle is closer to a title than other text.
http://www.w3.org/TR/CSS21/selector.html#adjacent-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

Selectors for hyperlinks

a:link
all hyperlinks that have
not yet been visited

a:visited

a {text-decoration:none;}
a:link {color:black}
a:visited {color:#CCC}
a:hover
{text-decoration:underline}

hyperlinks already visited

a:hover
hyperlink with mouse
over it

a:active!
user has already clicked
(but not yet navigated
away)
Correct order of selectors: Link, Visited, Hover, Active (LoVe, HAte)

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

Other :something-child classes

CSS3 adds other selectors:
:only-child
:last-child

Formula-based child selectors

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

Negation- :not selector

Selects everything else but the expression
mentioned in selector:
div:not(#main)!
Every div but not the main

: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/

Usable for animations (using the transition

property)
http://jsfiddle.net/naivists/NXW6F/
http://css-tricks.com/on-target/
22

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.

Transition creates an animation between the current state

and the new state
How to use:
https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions

What can be animated

https://developer.mozilla.org/en-US/docs/CSS/CSS_animated_properties

Simple example of transitions

http://jsfiddle.net/naivists/RZyen/
23

Form element selectors

:focus
captures the element currently in focus

:disabled, :enabled
captures disabled/enabled elements

:checked
captures checked options/checkboxes
Example of :focus
http://jsfiddle.net/naivists/TqvzV/
24

SEQUENCE OF APPLYING CSS

RULES

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*/

Rules which have "!important" flag, override

other rules
...but this does not cover all cases.
section aside p {font-size:10px;}
body p {font-size:20px}

Estimate the color

What is the color of text Demonstration of how it works?

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)

Orders the declarations

browser built-in rules

user rules
document author regular rules
document author !important rules
user !important rules

Rules of the same importance are sorted by specificity;

more specific rules are stronger
If specificity is the same, then applied in load sequence.
http://www.w3.org/TR/CSS21/cascade.html#cascading-order

Calculating the specificity

Specificity is defined as a number
sequence a-b-c-d. Specificities are sorted
by position
a: if the declaration is in element's "style"
attribute (then a=1) or a regular selector (a=0)
b: how many id-s the selector contains
c: how many other attributes, classes and/or
pseudo-classes the selector contains
d: how many elements or pseudo-elements
the selector contains
http://www.w3.org/TR/CSS21/cascade.html#specificity

Specificity calculation
Selector rule

a#myLink

div#aside p#intro a

div#aside p#intro a.myClass

div.aside p.intro.ar?cle a

<a class="myClass" style="color:red">

Specificity: the consequences

Never use !important rules
It's very hard to override them

Never use inline styles

You can't override them at all

31