Scribd
Upload
0 views38 pages

L10 - CSS 2

The document provides an overview of CSS, focusing on its two main components: styling rules and selectors. It explains various types of selectors, including tag, ID, class, combinatory, attribute, pseudo-element, and pseudo-class selectors, along with their usage and specificity hierarchy. Additionally, it highlights the importance of the 'important' keyword in overriding CSS rules.

Uploaded by

zwanezamokuhle55
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0 views38 pages

L10 - CSS 2

The document provides an overview of CSS, focusing on its two main components: styling rules and selectors. It explains various types of selectors, including tag, ID, class, combinatory, attribute, pseudo-element, and pseudo-class selectors, along with their usage and specificity hierarchy. Additionally, it highlights the importance of the 'important' keyword in overriding CSS rules.

Uploaded by

zwanezamokuhle55
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 38

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

You might also like