1
Dr. Navneet Kaur, Lovely
Professional University
CSE326
Internet Programming Laboratory
Lecture #5
Dr. Navneet Kaur
2
Dr. Navneet Kaur, Lovely
Professional University
Outline
▪ What is a selector?
▪ Types of CSS selectors
▪ Type
▪ Attribute
▪ Id
▪ Class
▪ Universal
▪ Pseudo classes
▪ Combinator
3
Dr. Navneet Kaur, Lovely
Professional University
4
Dr. Navneet Kaur, Lovely
Professional University
What is a selector?
▪ A CSS selector is the first part of a CSS Rule.
▪ It is a pattern of elements and other terms that tell the
browser which HTML elements should be selected to have
the CSS property values inside the rule applied to them.
▪ The element or elements which are selected by the selector
are referred to as the subject of the selector.
5
Dr. Navneet Kaur, Lovely
Professional University
Types of CSS selectors
▪ Type selector
▪ Attribute selectors
▪ Id selector
▪ Class selector
▪ Universal selector
▪ Pseudo selector
▪ Combinator selector
6
Dr. Navneet Kaur, Lovely
Professional University
Type selector
▪ The CSS type selector matches elements by node name.
▪ In other words, it selects all elements of the given type within
a document.
h1 {
color: red;
}
7
Dr. Navneet Kaur, Lovely
Professional University
Attribute selector
▪ The CSS attribute selector matches elements based on the
element having a given attribute.
a[href="https://example.org"]
{
color: green;
}
8
Dr. Navneet Kaur, Lovely
Professional University
Id selector
▪ The CSS ID selector matches an element based on the value
of the element's id attribute.
▪ In order for the element to be selected, its id attribute must
match exactly the value given in the selector.
#demo {
color: red;
}
9
Dr. Navneet Kaur, Lovely
Professional University
Class selector
▪ The CSS class selector matches elements based on the
contents of their class attribute.
.demo {
color: red;
}
10
Dr. Navneet Kaur, Lovely
Professional University
Universal selector
▪ The CSS universal selector (*) matches elements of any
type.
*{
color: green;
}
11
Dr. Navneet Kaur, Lovely
Professional University
Pseudo class selector
▪ User-action pseudo classes
▪ These pseudo-classes only apply when the user interacts with
the document in some way.
▪ These act as if a class had been added to the element when the
user interacts with it.
▪ :hover — this only applies if the user moves their pointer over an
element, typically a link.
h1:hover {
color:red;
}
12
Dr. Navneet Kaur, Lovely
Professional University
Combinator selector
▪ They combine other selectors in a way that gives them a
useful relationship to each other.
▪ Descendant combinator – This combines two selectors such
that elements matched by the second selector are selected if
they have an ancestor (parent, parent's parent, parent's parent's
parent, etc.) element
<div class="box"><p>Text in .box</p></div>
<p>Text not in .box</p>
.box p {
color: red;
}
13
Dr. Navneet Kaur, Lovely
Professional University
References
▪ https://www.w3schools.com/css/css_selectors.asp
▪ https://www.w3schools.com/tags/tag_div.ASP
▪ https://www.w3schools.com/css/css_margin.asp
▪ https://www.w3schools.com/cssref/pr_background-image.php
▪ https://www.w3schools.com/tags/tag_article.asp
▪ https://www.w3schools.com/css/css_inline-block.asp
▪ https://www.w3schools.com/css/css_padding.asp
▪ https://www.w3schools.com/cssref/sel_hover.php
▪ https://www.w3schools.com/cssref/pr_font_font-family.php
▪ https://www.w3schools.com/css/css_border_color.asp
▪ https://www.w3schools.com/cssref/pr_border-width.php
▪ https://www.w3schools.com/css/css_border.asp
14
Dr. Navneet Kaur, Lovely
Professional University
Program link
▪ https://onlinegdb.com/8ndIgFvUQ
▪ https://onlinegdb.com/3D9Md-2OL
▪ https://onlinegdb.com/rM-kTikDy
15
Dr. Navneet Kaur, Lovely
Professional University
Week 5 assignment
▪ Go to 🡪
https://www.freecodecamp.org/learn/2022/responsive-web-d
esign/
▪ Complete steps 26 to 91 of “Learn Basic CSS by building a
Cafe Menu”
16
Dr. Navneet Kaur, Lovely
Professional University
Week 5 assignment
17
Dr. Navneet Kaur, Lovely
Professional University
Thank you
