CSS Selectors and Specificity

WEBD 162
Specificity and CSS Selectors

CSS Rule Recap
• CSS Rule consists of:
• Selector { Declaration Block }
• Declaration Block consists of zero or more Declarations
• Declaration consists of Property: Value pair ending in semicolon ;
• Example:
body {
color: rgb(91,91,91);
background-color: ivory;
font-family: Verdana, Geneva, sans-serif;
}

Specificity
• CSS rules for an element may appear multiple times
within a web page:
• inline, embedded, external
• If there are multiple instances of a CSS rule, which one
applies?
• The rule with the highest specificity weight
• If all specificity weights the same, the rule that appears last
• http://www.smashingmagazine.com/2007/07/27/css-
specificity-things-you-should-know

Selector and Specificity
• Read selectors from right to left
• selector
• Which element is going to be affected by the rule?
• The rightmost part of selector is the type of element
• Everything to the left specifies which set of elements that are affected

Types of selectors
• A contextual selector specifies the context of a matching
element
• The type of element
• The position an element is in relation to other elements
• An attribute selector uses an element's attributes and
attribute values to target a rule to a specific element
• Common attributes used for targeting are:
• id – can only appear only once in the HTML document
• class – may appear multiple times in the HTML document

Contextual selectors
Selector Description
* Matches any element
elem Matches the element elem located anywhere in the
document
elem1, elem2 Matches any of the elements elem1, elem2, etc.
parent descendent Matches the descendent element that is nested within
the parent element at some level
parent > child Matches the child element that is a child of the parent
element
elem1 + elem2 Matches elem2 that is immediately preceded by the
sibling element elem1
elem1 - elem2 Matches elem2 that follows sibling element elem1

Attribute selectors
Selector Selects
elem#id Element elem with the ID value id
#id Any element with the ID value id
elem.class All elem elements with the class attribute value class
.class All elements with the class value class
elem[att] All elem elements containing the att attribute
elem[att="text"] All elem elements whose att attribute equals text
elem[att~="text"] All elem elements whose att attribute contains the word text
elem[att|="text"] All elem elements whose att attribute is a hyphen-separated
list of words beginning with text
elem[att^="text"] All elem elements whose att attribute begins with text
[CSS3]
elem[att$="text"] All elem elements whose att attribute ends with text [CSS3]
elem[att*="text"] All elem elements whose att attribute contains the value text
[CSS3]

How to calculate specificity of a rule
Weight Multiply by
1 # of element names or pseudo elements
10 # of classes or pseudo class
100 id selector
1000 If an in-line rule
Special cases:
• Universal attribute * = 0
• !important overrides all
• If two rules have the same specificity weight, the last one applies
• Visual Specificity Calculator: http://specificity.keegan.st/

Example:Hierarchy of Page Elements
body
article
header
h1 p p
p p p
aside
h1 p

“Code” for Context Selector example
<body>
<article>
<header>
<h1></h1>
<p></p>
<p></p>
</header>
<p></p>
<p></p>
<p></p>
</article>
<aside>
<h1></h1>
<p></p>
</aside>
</body>

Contextual Selector: *
body
article
header
h1 p p
p p p
aside
h1 p
Affected elements indicated by red shadow

Contextual Selector: *
<body>
<article>
<header>
<h1></h1>
<p></p>
<p></p>
</header>
<p></p>
<p></p>
<p></p>
</article>
<aside>
<h1></h1>
<p></p>
</aside>
</body>
Affected elements in red
Affects all elements (wildcard)

Contextual Selector: p
body
article
header
h1 p p
p p p
aside
h1 p

Contextual Selector: p
<body>
<article>
<header>
<h1></h1>
<p></p>
<p></p>
</header>
<p></p>
<p></p>
<p></p>
</article>
<aside>
<h1></h1>
<p></p>
</aside>
</body>
Affects any p element

Contextual Selector: article p
body
article
header
h1 p p
p p p
aside
h1 p

Contextual Selector: article p
<body>
<article>
<header>
<h1></h1>
<p></p>
<p></p>
</header>
<p></p>
<p></p>
<p></p>
</article>
<aside>
<h1></h1>
<p></p>
</aside>
</body>
Affects any p element that is a
descendant of an article
element

Contextual Selector: article > p
body
article
header
h1 p p
p p p
aside
h1 p

Contextual Selector: article > p
<body>
<article>
<header>
<h1></h1>
<p></p>
<p></p>
</header>
<p></p>
<p></p>
<p></p>
</article>
<aside>
<h1></h1>
<p></p>
</aside>
</body>
child of an article element

Contextual Selector: h1, p
body
article
header
h1 p p
p p p
aside
h1 p

Contextual Selector: h1, p
<body>
<article>
<header>
<h1></h1>
<p></p>
<p></p>
</header>
<p></p>
<p></p>
<p></p>
</article>
<aside>
<h1></h1>
<p></p>
</aside>
</body>
Affects any h1 or p element

Contextual Selector: h1 + p
body
article
header
h1 p p
p p p
aside
h1 p

Contextual Selector: h1 + p
<body>
<article>
<header>
<h1></h1>
<p></p>
<p></p>
</header>
<p></p>
<p></p>
<p></p>
</article>
<aside>
<h1></h1>
<p></p>
</aside>
</body>
Affects a p element that
immediately follow an h1
element

Contextual Selector: article h1 + p
body
article
header
h1 p p
p p p
aside
h1 p

Contextual Selector: article h1 + p
<body>
<article>
<header>
<h1></h1>
<p></p>
<p></p>
</header>
<p></p>
<p></p>
<p></p>
</article>
<aside>
<h1></h1>
<p></p>
</aside>
</body>
Affects a p element that
immediately follows any h1
element that is a descendant of
an article element

Contextual Selector: h1 - p
body
article
header
h1 p p
p p p
aside
h1 p

Contextual Selector: h1 - p
<body>
<article>
<header>
<h1></h1>
<p></p>
<p></p>
</header>
<p></p>
<p></p>
<p></p>
</article>
<aside>
<h1></h1>
<p></p>
</aside>
</body>
sibling that follows after any h1
element

Contextual Selector: article h1 - p
body
article
header
h1 p p
p p p
aside
h1 p

Contextual Selector: article h1 - p
<body>
<article>
<header>
<h1></h1>
<p></p>
<p></p>
</header>
<p></p>
<p></p>
<p></p>
</article>
<aside>
<h1></h1>
<p></p>
</aside>
</body>
Affects any element that is a
child of an article element

Contextual Selector: article > *
body
article
header
h1 p p
p p p
aside
h1 p

Contextual Selector: article > *
<body>
<article>
<header>
<h1></h1>
<p></p>
<p></p>
</header>
<p></p>
<p></p>
<p></p>
</article>
<aside>
<h1></h1>
<p></p>
</aside>
</body>

CSS Selectors and Specificity

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to CSS Selectors and Specificity

Similar to CSS Selectors and Specificity (20)

Recently uploaded

Recently uploaded (20)

CSS Selectors and Specificity

Editor's Notes