Scribd
Upload
10 views

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

Uploaded by

muhammadmurtaza6211
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

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

Uploaded by

muhammadmurtaza6211
Copyright
© © All Rights Reserved
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