Scribd
Upload
25 views9 pages

Lec-10 W5 - (CSS-Selectors Part 2)

Uploaded by

muhammadmurtaza6211
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
25 views9 pages

Lec-10 W5 - (CSS-Selectors Part 2)

Uploaded by

muhammadmurtaza6211
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/ 9

4/24/2024

WEB DEVELOPMENT

Lecturer – W5

Lecture Outline
 CSS Selectors
 The Descendant Selector
 The Child Selector
 Adjacent selector
 Sibling Selector
 Attribute selector
 Pseudo-classes
 Pseudo-Elements

1
4/24/2024

The Descendant Selector

 To selects all elements that are descendants of a specified


element.
 General syntax of descendent selector
 Parent-element descendent-element {CSS declaration section}
ul em {
background-color: yellow;
}
 The style rules will apply to <em> element only when it lies
inside the<ul> tag.

The Descendant Selector… Example


<!DOCTYPE html>
<html>
<head> <style>
div p {background-color: yellow; }
</style> </head>
<body>
<h2>Descendant Selector</h2>
<p>The descendant selector matches all elements
that are descendants of a specified element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section> <p>Paragraph 3 in the div,
not Child but Descendant </p> </section>
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>

2
4/24/2024

The Child Selector

 To selects all elements that are the immediate children of a


specified element.
 The syntax to apply child selector
 Parent-element > immediate-child-element {CSS declaration section}
body > p { color: blue;}
 This rule will render all the paragraphs in blue
if they are direct child of the <body> element.

Example of Child Selector


<!DOCTYPE html>
<html>
<head>
<title> CSS Child Selector </title> Output
<style>
This paragraph is the direct child of body.
body > p { color: blue; }
This paragraph is also the direct child of body.
</style>
This paragraph is indirect child of body.
</head>
<body>
<p>This paragraph is the direct child of body.</p>
<p>This paragraph is also the direct child of body.</p>
<div> <p>This paragraph is indirect child of body.</p></div>
</body>
</html>

3
4/24/2024

Adjacent Sibling Selector

 Used to selects element that are the adjacent sibling


(immediately following sibling element) of a specified
element.
 This selector is made up of two selectors separated by
the plus ( + ) symbol.
 Its general syntax is as follows.
 E1 + E2, where E2 is the target of the selector.

Example of Adjacent Sibling Selector

<!DOCTYPE html>
<html>
<head> <style>
div + p {background-color: yellow;}
</style> </head>
<body>
<div>
<p>Paragraph 1. in the div</p>
</div>
<p>Paragraph 2. Not in a div</p>
<p>Paragraph 3. Not in a div</p>
</body>
</html>

10

4
4/24/2024

General Sibling Selector


 To selects all the elements that are siblings of the specified
element
 It consists of two selectors separated by the tilde (∼)
character.
 Its general syntax is as follows.
 E1 ∼ E2, where E2 is the target of the selector.

11

Example of General Sibling Selector

<!DOCTYPE html>
<html>
<head>
<style>
div ~ p { background-color: yellow;}
</style>
</head>
<body>
<div>
<p>Paragraph 1, child of the div.</p>
</div>
<p>Paragraph 2, sibling of the div.</p>
<p>Paragraph 3, sibling of the div.</p>
</body>
</html>

12

5
4/24/2024

The Attribute Selector

 To select elements on the bases of a specified attribute or


attribute value.
 Create an attribute selector by putting the attribute — in a
pair of square brackets.
[title] { color: blue; }
You can also place an element before it.
h1[title]{ color: blue; }
input[type="submit"] { border:2px solid green; }

13

Example of Attribute Selector


<!DOCTYPE html>
<html>
Output
<head>
<title>Example of attribute selector</title>
<style>
h1[title] { color: blue; }
input[type="text"] { border:1px solid red;}
input[type="submit"] { border:2px solid green;}
</style>
</head>
<body>
<h1 title="heading">Attribute Selector </h1>
<p title="para1">The default text color</p>
<form>
<input type="text" name="texfield">
<input type="submit" value="Submit">
</form>
</body> </html>

14

6
4/24/2024

What are Pseudo-classes?

 A pseudo-class is used to define a special state of an element.


 Style an element when a user mouses over it
 Style visited and unvisited links differently
 Style an element when it gets focus
 The syntax of pseudo-classes:
selector: pseudo-class {property : value; }
 Example
a:link {color: red;}
/* visited link */
a:visited {color: green;}

15

CSS Pseudo Classes


Selector Example Example description
:active a:active Selects the active link
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the <input> element that has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects <input> elements with a value within a specified range
:invalid input:invalid Selects all <input> elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"
:last-child p:last-child Selects every <p> elements that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
: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
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last
child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects <input> elements with no "required" attribute
:out-of-range input:out-of-range Selects <input> elements with a value outside a specified range
:read-only input:read-only Selects <input> elements with a "readonly" attribute specified
:read-write input:read-write Selects <input> elements with no "readonly" attribute
:required input:required Selects <input> elements with a "required" attribute specified
:root root Selects the document's root element
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all <input> elements with a valid value

:visited a:visited Selects all visited links

16

7
4/24/2024

CSS Pseudo-elements
 What are Pseudo-Elements?
 A CSS pseudo-element is used to style specified parts of an
element.
 For example, it can be used to:
 Style the first letter, or line, of an element
 Insert content before, or after, the content of an element
 The syntax of pseudo-elements:
 selector::pseudo-element { property: value; }
 p::first-line {
color: #ff0000;
font-variant: small-caps;
}

17

All CSS Pseudo Elements

Selector Example Example description


::after p::after Insert content after every <p> element

::before p::before Insert content before every <p> element

::first-letter p::first-letter Selects the first letter of every <p> element

::first-line p::first-line Selects the first line of every <p> element

::marker ::marker Selects the markers of list items

::selection p::selection Selects the portion of an element that is selected by


a user

18

8
4/24/2024

Example……CSS Pseudo-elements
 <!DOCTYPE html>
 <html>
 <head> <style>
 h3::after {content: "Remember this";}
 h3::first-letter {font-size: 200%; color: #8A2BE2;}
 p::first-line {background-color: yellow; }
 ::marker {color: red; font-size: 23px;}
 ::selection {color: red; background: yellow;}
 </style></head>
 <body>
 <h1>Demo of the CSS Pseudo Elements</h1>
 <h3>Your time is limited, so don't waste it living
 someone else's life. Don't be trapped by dogma —
 which is living with the results of other people's
 thinking.....</h3>
 <p>“Self forgiveness is one of the most unselfish
 things you can do. Everyone around benefits as
 you become less demanding, more giving, and more
 forgiving."</p>
 <ol>
 <li>Item 1</li> <li>Item 2</li> <li>Item 3</li>
 </ol>
 </body></html>
19

You might also like