Scribd
Upload
10 views16 pages

Unit 7

The document provides an overview of various CSS selectors used for targeting HTML elements, including element, class, ID, descendant, and child selectors. It includes a true or false quiz to test understanding of these selectors and fill-in-the-gap exercises for practical application. Additionally, it poses questions regarding the functionality and examples of specific selectors.

Uploaded by

Svetlana Tarasova
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
10 views16 pages

Unit 7

The document provides an overview of various CSS selectors used for targeting HTML elements, including element, class, ID, descendant, and child selectors. It includes a true or false quiz to test understanding of these selectors and fill-in-the-gap exercises for practical application. Additionally, it poses questions regarding the functionality and examples of specific selectors.

Uploaded by

Svetlana Tarasova
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/ 16

https://www.eslvideo.com/quiz.php?

id=36
884

Describing People ~
Who is it?
Description: Listen to the
descriptions. Who is being
described?
Selector: A CSS selector is a pattern used to select and target specific HTML elements in a web page
for styling or manipulation.
Element Selector: It selects HTML elements by their element type. For example, the selector "p"
targets all paragraph elements.
Class Selector: It selects HTML elements by their class attribute. The selector ".classname" targets all
elements with the specified class.
D Selector: It selects an element by its unique ID attribute. The selector "#elementID" targets the
element with the specified ID.
Descendant Selector: It selects an element that is a descendant of another specified element. The
selector "parent descendant" targets the descendant element.
Child Selector: It selects an element that is a direct child of another specified element. The selector
"parent > child" targets the child element.
Universal Selector: It selects all HTML elements on the page. The selector "*" targets all elements.
Attribute Selector: It selects elements based on their attributes. For example, the selector
"[type='text']" targets elements with the attribute "type" set to "text."
Pseudo-class Selector: It selects elements based on their state or position. For example, the selector
"a:hover" targets links when they are being hovered over.
Pseudo-element Selector: It selects a specific part of an element. The selector "p::first-line" targets
the first line of paragraphs.
Grouping Selector: It groups multiple selectors together and applies the same styles to all of them.
For example, "h1, h2, h3" targets multiple heading elements.
Attribute Value Begins With Selector: It selects elements whose attribute value begins with a specific
string. For example, "input[type^='submit']" targets input elements with a "type" attribute starting
with "submit."
True or False Quiz: CSS Selectors

Instructions: Determine whether the following statements are true or false based on the provided CSS selectors
dictionary.

The class selector in CSS is represented by the symbol "#".


The element selector targets specific HTML elements based on their element type.
Pseudo-element selectors are used to select elements based on their attributes.
Universal selector in CSS selects all HTML elements on the page.
The descendant selector selects elements that are direct children of another element.
ID selector is used to target an element based on its unique ID attribute.
Grouping selector allows applying the same styles to multiple selectors at once.
Attribute value begins with selector selects elements with attribute values that start with a specific string.
Pseudo-class selectors target specific parts of an element.
Attribute value contains selector selects elements whose attribute values contain a specific string.
Attribute value not equal selector selects elements whose attribute value is equal to a specific string.
Child selector selects an element that is a descendant of another specified element.
Descendant selector selects an element that is a direct child of another specified element.
Attribute selector is used to select elements based on their class attribute.
Attribute value ends with selector selects elements whose attribute values end with a specific string.
Fill in the gaps using appropriate CSS selectors from the previous vocabulary:

Select all paragraphs on the page using the ______ selector.


Apply styles to elements with the class "highlight" using the ______ selector.
Target the element with the ID "header" using the ______ selector.
Style all list items that are descendants of an unordered list using the ______ selector.
Select the direct child elements of a div with the class "container" using the ______ selector.
Apply styles to all elements on the page using the ______ selector.
Target anchor tags that are being hovered over using the ______ selector.
Style the first line of all paragraphs using the ______ selector.
Group together headings h1, h2, and h3 using the ______ selector.
Select input elements with the "type" attribute starting with "submit" using the ______
selector.
Apply styles to anchor tags with "example" in their "href" attribute using the ______
selector.
Target images with a ".png" file extension using the ______ selector.
Select input elements with a "type" attribute not equal to "text" using the ______ selector.
Apply styles to elements that have a "data-info" attribute using the ______ selector.
Target the last child of an unordered list using the ______ selector.
Question 1: Which CSS selector targets all paragraph elements on a web page?

Question 2: How do you select an element based on its class attribute using a

CSS selector?

Question 3: What does the ID selector target in CSS?

Question 4: Explain the purpose of the descendant selector in CSS and provide

an example.

Question 5: Which selector would you use to target all HTML elements on the

page?

Question 6: Give an example of a pseudo-class selector and explain its

functionality.
Task 1: Choose the correct CSS selector that targets all paragraph elements. a) .paragraph b)

#paragraph c) p d) .p

Task 2: Which selector is used to target elements with the class "highlight"? a) highlight b)

#highlight c) .highlight d) .highlights

Task 3: What does the attribute selector "a[href^='https']" target? a) All anchor elements b)

Anchor elements with "https" in their href attribute c) Anchor elements with a URL starting

with "https" d) Anchor elements without the "https" attribute

Task 4: Choose the correct CSS selector to target the first child element of a div. a) div:first-

child b) div:first c) div:first-of-type d) div:first-child-element

Task 5: Which selector targets the last element with the class "item" in a list? a) .item:last-

You might also like