Scribd
Upload
21 views25 pages

Lecture 8

This document summarizes different CSS selectors including: - Simple selectors like element, class, ID, and universal selectors - Pseudo-class selectors like link, hover, active, focus, enabled, disabled, and checked - Attribute selectors that select elements based on attributes and values - Combinator selectors that define relationships between selectors like descendant, child, sibling, and adjacent sibling selectors The document provides examples of how to use each type of selector in CSS code. In 3 sentences or less, it summarizes the main types of CSS selectors and how they are used to select and style elements on an HTML page.

Uploaded by

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

Lecture 8

This document summarizes different CSS selectors including: - Simple selectors like element, class, ID, and universal selectors - Pseudo-class selectors like link, hover, active, focus, enabled, disabled, and checked - Attribute selectors that select elements based on attributes and values - Combinator selectors that define relationships between selectors like descendant, child, sibling, and adjacent sibling selectors The document provides examples of how to use each type of selector in CSS code. In 3 sentences or less, it summarizes the main types of CSS selectors and how they are used to select and style elements on an HTML page.

Uploaded by

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

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 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 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 {
background-color: yellow;
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 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 {
background-color: yellow;
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>
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; }
Pseudo-Class Selectors –
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; }
Pseudo-Class Selectors –
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>
Pseudo-Class Selectors –
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] {
background-color: yellow;
}
</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 Selectors –
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"] {
background-color: yellow;
}
</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 Selectors –
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 Selectors –
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 Selectors –
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

You might also like