CSS
Cascade and Selectors
COS216
AVINASH SINGH
DEPARTMENT OF COMPUTER SCIENCE
UNIVERSITY OF PRETORIA
CSS – OVERVIEW
• CSS has two main components
• Styling rules
• Details on how to style elements
• Selectors
• Details on which elements to style
CSS – SELECTORS
• Selectors are patterns that pick elements based on their:
• HTML tag name (eg: div, table, button)
• HTML ID (custom unique ID assigned to the element by a developer)
• HTML class (custom class/group assigned to the element by a developer)
• Cascades and hierarchy (eg: all td elements from a table)
• Combination of any of the above
• CSS selectors are also used in JavaScript and JQuery to find elements in the DOM
and to manipulate them (eg: add, remove, style, resize, hide, show, etc)
CSS – SELECTORS
• Selectors are the initial part of a CSS rule set
selector
{
/* rules here */
}
CSS – INLINE SELECTORS
• Selectors can not be used in inline styles (HTML style attribute)
• If selectors are required, they have to be specified in
• External CSS file
• Inside a HTML <style> tag
CSS – TAG SELECTORS
• Select elements by tag name
• No prefix added to selector
<html>
<body>
<table><tr><td>Dummy</td></tr></table>
</body>
</html>
body table
{ {
width: 100%; border: 2px solid lime;
height: 100%; height: 500px;
padding: 20px; margin: 20px;
} }
CSS – ID SELECTORS
• Select and element by its ID
• A # prefix is added to selector
<html>
<body>
<div id="mydiv"></div>
</body>
</html>
#mydiv
{
border: 2px solid red;
border-radius: 5px;
width: 200px;
height: 200px;
}
CSS – CLASS SELECTORS
• Select a group of elements by their class name
• A (.) prefix is added to selector
<html>
<body>
<div class="greenbox"></div>
<div class="greenbox"></div>
</body>
</html>
.greenbox
{
border: 10px dotted green;
width: 200px;
height: 200px;
}
CSS – ALL SELECTORS
• Select all elements (* selector)
• Based on preceding selector, may refer to
all elements in a subgroup
<html>
<body>
<div></div>
<div></div>
</body>
</html>
*
{
padding: 0px;
margin: 0px;
}
CSS – MAIN SELECTOR SUMMARY
Selector Example Description
element p Selects all <p> elements
.class .intro Selects all elements with
w3schools.com
class="intro"
#id #firstname Selects the element with
id="firstname"
* * Selects all elements
CSS – COMBINATORY SELECTORS
• Apply a CSS rule set to different groups at the same time (comma separated)
/*
Applies rule to all:
elements with a myclass class
elements with a myid ID
link (a) elements
*/
.myclass, #myid, a
{
width: 200px;
}
CSS – COMBINATORY SELECTORS
• Apply a CSS rule set to elements with one or more attributes (not separated)
• For example, select elements that have 2 classes instead of one
/* Applies the rule to elements /* Applies the rule elements
which have BOTH classes */ that have the class AND ID */
.myclass1.myclass2 .myclass#myid
{ {
padding: 5px; position: relative;
} }
CSS – COMBINATORY SELECTORS
• Apply a CSS rule set to an element inside another element (space separated)
• Inside means any descendant element down the line
/* Applies the rule to any link inside /* Applies the rule to
an element with a specific ID */ all cells of all tables */
#myfooter a table td
{ {
color: red; padding: 5px;
} }
CSS – COMBINATORY SELECTORS
• Apply a CSS rule to immediate child elements (> separated)
• Any descendants that are not immediate children are ignored
/* Applies the rule to all cells that
/* Applies the rule to a are children of a row which are children
child div inside a span */ of a table. Any nested tables inside
span > div this table will not have these rules. */
{ table > tr > td
position: relative; {
} padding: 5px;
}
CSS – COMBINATORY SELECTORS
• Apply a CSS rule to elements that immediately follow another one (+ separated)
• Apply a CSS rule to elements that immediately precede another one (~ separated)
/* Applies the rule to a link /* Applies the rule to a link
that immediately succeeds a div */ that immediately precedes a div */
div+a div~a
{ {
position: relative; position: relative;
} }
Selector Example Description
element,element div, p Selects all <div> elements and all <p>
elements
element element div p Selects all <p> elements inside <div>
elements
element>element div > p Selects all <p> elements where the parent is a
<div> element
element+element div + p Selects all <p> elements that are placed
immediately after <div> elements
element1~element2 p ~ ul Selects every <ul> element that are preceded
by a <p> element
w3schools.com
CSS – COMBINATORY SELECTOR SUMMARY
CSS – ATTRIBUTE SELECTORS
• Apply a CSS rule to elements which have a specific attribute
• Can also be applied to values of the attributes
/* Applies the rule to all /* Applies the rule to table cells
elements with a href attribute */ with a colspan attribute of 3 */
*[href] td[colspan="3"]
{ {
color: red; padding: 5px;
} }
CSS – ATTRIBUTE SELECTOR SUMMARY
Selector Example Description
[attribute] [target] Selects all elements with a target attribute
[attribute=value] [target="_blank"] Selects all elements with target="_blank"
[attribute~=value] [title~="flower"] Selects all elements with a title attribute containing
the word "flower"
Not that important
[attribute|=value] [lang|="en"] Selects all elements with a lang attribute value that is
exactly "en"
[attribute^=value] a[href^="https"] Selects every <a> element whose href attribute
value begins with "https"
[attribute$=value] a[href$=".pdf"] Selects every <a> element whose href attribute
value ends with ".pdf"
[attribute*=value] a[href*="google"] Selects every <a> element whose href attribute
value contains the substring “google"
w3schools.com
CSS – PSEUDO-ELEMENT SELECTOR
• Pseudo-elements are used to style specific parts of an element
• Allows to select individual letters or sections before/after elements
CSS – PSEUDO-ELEMENT SELECTOR
• Insert something before or after an element
/* Add a border before divs */ /* Add a border after divs */
div::before div::after
{ {
border-bottom: 5px solid black; border-top: 5px solid black;
} }
CSS – PSEUDO-ELEMENT SELECTOR
• Style what a user has selected
• If you use your mouse and select-and-drag over text, the text will be selected
• Not implemented by all browsers, might require browser-specific selection
• -moz-selection -webkit-selection etc
/* If a user selects text, the selection
is red with a white font color */
::selection
{
background: red; color: white;
}
CSS – PSEUDO-ELEMENT SELECTOR
SUMMARY
Selector Example Description
::after p::after Insert something after the content of each <p>
element
::before p::before Insert something before the content of each <p>
element
::selection p::selection Selects the portion of an element that is selected by
a user
::first-letter p::first-letter Selects the first letter of each <p> element
::first-line p::first-line Selects the first line of each <p> element
w3schools.com
CSS – PSEUDO-CLASS SELECTOR
• Pseudo-elements are used to style specific states of an element
• Allows to style according to user interaction
• Allows to style according to position/order of elements
CSS – PSEUDO-CLASS SELECTOR
• Change the style if a user’s mouse hovers over and element
/* If a user's mouse is over a
button, increase the border */
button
{
border-width: 1px;
}
button:hover
{
border-width: 3px;
}
CSS – PSEUDO-CLASS SELECTOR
• Change the style if n input has focus
• Example: user selects a text input or uses tab to jump to the input
/* If an input is focused */
input:focus
{
color: grey;
}
CSS – PSEUDO-CLASS SELECTOR
• Select the first or last element
/* Selects the first /* Selects the last
cell in a table */ cell in a table */
table td:first-child table td:last-child
{ {
color: red; color: red;
} }
CSS – PSEUDO-CLASS SELECTOR
• Select a specific element for a list
• The selected n can be a number, keyword, or formula
• An index for n starts at 1, not at 0 like traditional arrays
/* Selects the third /* Selects the second-last
cell in a table */ cell in a table */
table td:nth-child(3) table td:nth-last-child(2)
{ {
color: red; color: red;
} }
CSS – PSEUDO-CLASS SELECTOR
• Select elements that are not adhering to the selector
/* Selects all elements that are not divs */
:not(div)
{
width: 100%;
}
Selector Example Description
:hover a:hover Selects links on mouse over
:focus input:focus Selects the <input> element that has focus
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:last-child p:last-child Selects every <p> elements that is the last child of its parent
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent,
counting from the last child
:not(selector) :not(p) Selects every element that is not a <p> element
Many more …
CSS – PSEUDO-CLASS w3schools.com
SELECTOR SUMMARY
CSS –
SPECIFICITY
CSS – SPECIFICITY HIERARCHY
• CSS can be specified in various places
• If there are conflicting/duplicate rules, the specificity determines which rule is
applied
• Each selector has a specificity and the one with the highest weight wins
Four categories of specificity
CSS – A: inline styles
SPECIFICITY
HIERARCHY B: IDs
C: classes, pseudo-classes, attributes
D: elements, pseudo-elements
CSS – SPECIFICITY HIERARCHY
• To calculate the specificity
1. Count the number of times each category is represented in the selector
2. Place the values in a comma delimited list with the following category structure
3. Combine/concatenate the list to get a final value
4. Higher weights are applied over lower weights
5. If weights are the same, typically the last defined one is preferred
• Example:
• A,B,C,D = 0,1,3,1 = 0131 = 131 weight (looses to 1000)
• A,B,C,D = 1,0,0,0 = 1000 = 1000 weight (wins over 131)
CSS – SPECIFICITY HIERARCHY
ul#nav li.active a
• A: inline styles = none [0]
• B: IDs = #nav [1]
• C: classes, pseudo-classes, attributes = .active [1]
• D: elements, pseudo-elements = ul li a [3]
• A,B,C,D = 0,1,1,3 = 0113 = 113 weight
CSS – SPECIFICITY HIERARCHY
#footer *:not(nav) li
• A: inline styles = none [0]
• B: IDs = #footer [1]
• C: classes, pseudo-classes, attributes = none [0] (not is not counted, only what is
inside it, * is also not counted, since it means everything)
• D: elements, pseudo-elements = nav li [2]
• A,B,C,D = 0,1,0,2 = 0102 = 102 weight
CSS – SPECIFICITY HIERARCHY
Selector Weight Reason
* 0 * not counted
li 1 One element
li:first-line 2 One element, one pseudo-
element
ul ol+li 3 Three elements
ul ol li.red 13 One class, three elements
div p.coins 12 Two elements, one class
#bitcoin 100 One ID
body #bitcoin.coins p 112 One ID, one class, two elements
<a style=“color: 1000 Inline style
red”></a>
CSS – IMPORTANT
• The important keyword can be used to forcefully overwrite the specificity
• Important rules get preference over the previous hierarchy and priorities
• If multiple conflicting rules all have the important keyword, those rules themselves
are subject to a specificity hierarchy amongst those rules
/* This rule will overwrite all other div colors,
including colors specified in inline styles
(except if the inline style itself is marked as important) */
div
{
color: red !important;
}
CSS
