Lecture 8

Web Technologies
CSS Selectors
Today’s Lecture
• CSS Selectors
– Simple Selectors
• CSS Universal Selector, CSS Element Selector, CSS Class
Selector, and CSS ID Selector.
– Pseudo-Class Selectors
• Link Pseudo-Classes, User Action Pseudo-Classes, and User
Interface State Pseudo-Classes.
– Attribute Selectors
• Attribute Present Selector, Attribute Equals Selector,
Attribute Contains Selector, Attribute Begins with Selector,
and Attribute Ends with Selector.
– Combinator Selectors
• Child Selectors (Descendant Selector, and Direct Child
Selector), and Sibling Selectors (General Sibling Selector, and
Adjacent Sibling Selector).
Simple Selectors - CSS Universal Selector
• It selects all the elements on the page.
• Within CSS, universal selector denoted by an asterisk *
• Example: below CSS rule will affect every element on the page:
<!DOCTYPE html>
<html>
<head>
<style>
*{
background-color: lightgreen;
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Demo of the * selector</h1>
<div class="course">
<p id="ctitle">Course Title: Web Technologies</p>
<p id="ccode">Course Code: CSC336</p>
</div>
<p>Department: Computer Science</p>
</body>
</html>
Simple Selectors - CSS Element Selector
• It selects elements based on the element name.
• Example: below CSS rule will target all p element on the page:
<!DOCTYPE html>
<html>
<head>
<style>
p{
background-color: yellow;
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Demo of the p selector</h1>
</div>
</body>
</html>
Simple Selectors - CSS Class Selector
• It selects an element based on the element’s class attribute value.
• Within CSS, classes are denoted by period . followed by class name.
• Example: class selector will select any element containing the class
course, including div and p elements.
<!DOCTYPE html>
<html>
<head>
<style>
.course {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Demo of the . selector</h1>
</div>
</body>
</html>
Simple Selectors - CSS ID Selector
• It selects an element based on the element’s id attribute value.
• Within CSS, id are denoted by hash sign # followed by id name.
• Example: ID selector will select the element containing the id
attribute value of ccode
<!DOCTYPE html>
<html>
<head>
<style>
#ccode {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Demo of the # selector</h1>
</div>
</body>
</html>
Pseudo-Class Selectors –
Link Pseudo-Classes
• :link pseudo-class
– It defines a link that has not visited yet.
– Syntax
• a:link { color: red; }
• :visited pseudo-class
– It defines a link that has already visited (based on their browsing
history).
– Syntax
• a:visited { color: green; }
User Action Pseudo-Classes
• :hover pseudo-class
– When user moves mouse cursor over element.
– Syntax
• a:hover { color: pink; }
• :active pseudo-class
– When a user engages an element, such as clicking on an element.
– Syntax
• a:active { color: blue; }
• :focus pseudo-class
– When a user has made an element focus point of the page, often
by using keyboard to tab from one element to another.
– Syntax
• a:focus { color: yellow; }
Link and User Action Pseudo-Classes
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: pink;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<h2>Styling a link depending on state</h2>
<p><b><a href=“mypage.html" target="_blank">This is a link</a></b></p>
</body>
</html>
User Interface State Pseudo-Classes
• :enabled pseudo-class
– Selects an input that is in the default state of enabled and available for use.
– Syntax:
• input:enabled {...}
• input[type="text"]:enabled { background-color:red; }
• :disabled pseudo-class
– Selects an input that has the disabled attribute tied to it.
– Syntax:
• input:disabled {...}
• input[type="text"]:disabled {background-color:blue;}
• :checked
– Represents the selected states of radio and checkbox elements.
– Syntax:
• input:checked { border:1px solid pink;}
Pseudo-Classes and HTML Classes
• Pseudo-classes can be combined with HTML classes.
• Example: when we hover over the link, it will change color and font-size:
<!DOCTYPE html>
<html>
<head>
<style>
a.highlight:hover {
color: red;
font-size: 24px;
}
</style>
</head>
<body>
<h2>Pseudo-classes and HTML Classes</h2>
<p>When you hover over the first link below, it will change color and
font size:</p>
<p><a class="highlight" href="bse6a.html">BSE 6A</a></p>
<p><a href="bse6b.html">BSE 6B</a></p>
</body>
</html>
Hover on <div>
• Example: using the :hover pseudo-class on a <div> element:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
color: white;
padding: 50px;
text-align: center;
}
div:hover {
background-color: red;
color: black;
}
</style>
</head>
<body>
<p>Mouse over the div element below to change its background
color:</p>
<div>Mouse Over Me and See The Magic</div>
</body>
</html>
Attribute Selectors
• It’s possible to style HTML elements that have specific attributes or
attribute values.
• Different Attributes in CSS:
– Attribute Present Selector [attribute]
– Attribute Equals Selector [attribute="value"]
– Attribute Contains Selector [attribute*="value"]
– Attribute Begins with Selector [attribute^="value"]
– Attribute Ends with Selector [attribute$="value"]
Attribute Selectors –
Attribute Present Selector
• To select an element based on if attribute is present or not, simply
include attribute name in square brackets [] within a selector.
• [attribute] selector is used to select elements with a specified
attribute.
• Example: selects all <a> elements with a target attribute:
<head>
<style>
a[target] {
}
</style>
</head>
<body>
<h2>CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>
<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
Attribute Equals Selector
• To identify an element with exact matching, include attribute name
in square brackets [] with it’s value.
• [attribute="value"] selector is used to select elements with a
specified attribute with it’s value.
• Example: selects all <a> elements with a target="_blank" attribute:
<head>
<style>
a[target="_blank"] {
}
</style>
</head>
<body>
<h2>CSS [attribute="value"] Selector</h2>
<p>The link with target="_blank" gets a yellow background:</p>
<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
Attribute Contains Selector
• When looking to find an element based on part of attribute value,
but not an exact match, asterisk sign * may be used within the
square brackets [] of a selector.
• [attribute*="value"] selector is used to select elements whose
attribute value contains a specified value.
• Example: selects all elements with a class attribute value that
contains "te":
Attribute Begins with Selector
• When looking to find an element whose attribute value begins with
a specified value, circumflex accent sign ^ may be used within
square brackets [] of a selector.
• [attribute^="value"] selector is used to select elements whose
attribute value begins with a specified value.
• Example: selects all elements with a class attribute value that
begins with "top":
Attribute Ends with Selector
• When looking to find an element whose attribute value ends with a
specified value, dollar sign $ may be used within square brackets [] of
a selector.
• [attribute$="value"] selector is used to select elements whose
attribute value ends with a specified value.
• Example: selects all elements with a class attribute value that ends
with "test":
Combinator Selectors
• A combinator explains the relationship between the selectors.
– Between the selectors, we can include a combinator.
• Different Combinators in CSS:
– Child Selectors
• Descendant Selector (space)
• Direct Child Selector (>)
– Sibling Selectors
• General Sibling Selector (~)
• Adjacent Sibling Selector (+)
Child Selectors - Descendant Selector
• It matches all elements that are descendants of a specified element.
• Example: selects all <p> elements inside <div> elements:
Child Selectors - Direct Child Selector
• It matches all elements that are direct children of a specified
element.
• They are created by using greater than sign > between parent
element and child element within the selector.
• Example: selects all <p> elements that are direct children of a <div>
element:
Sibling Selectors - General Sibling Selector
• It matches all elements that are next siblings of a specified element.
• They are created by using tilde sign ~ between two elements within
a selector.
• Example: selects all <p> elements that are siblings of <div>
elements:
Sibling Selectors - Adjacent Sibling
Selector
• It matches all elements that are adjacent siblings (immediately
following) of a specified element.
• They are created by using plus sign + between two elements within
a selector.
• Example: selects all <p> elements that are placed immediately after
<div> elements:
Summary of Today’s Lecture
• CSS Selectors
– Simple Selectors
• CSS Universal Selector, CSS Element Selector, CSS Class
Selector, and CSS ID Selector.
– Pseudo-Class Selectors
• Link Pseudo-Classes, User Action Pseudo-Classes, and User
Interface State Pseudo-Classes.
– Attribute Selectors
• Attribute Present Selector, Attribute Equals Selector,
Attribute Contains Selector, Attribute Begins with Selector,
and Attribute Ends with Selector.
– Combinator Selectors
• Child Selectors (Descendant Selector, and Direct Child
Selector), and Sibling Selectors (General Sibling Selector, and
Adjacent Sibling Selector).
References
• https://www.w3schools.com/css/css_selectors.asp
• https://www.w3.org/TR/selectors-3/#simple-selectors
• https://www.w3.org/TR/selectors-3/#universal-selector
• https://www.w3.org/TR/selectors-3/#attribute-selectors
• https://www.w3.org/TR/selectors-3/#class-html
• https://www.w3.org/TR/selectors-3/#id-selectors
• https://www.w3.org/TR/selectors-3/#pseudo-classes
• https://www.w3.org/TR/selectors-3/#pseudo-elements
• https://www.w3.org/TR/selectors-3/#combinators

Lecture 8

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 8

Uploaded by

Copyright:

Available Formats

Web Technologies

You might also like