Scribd
Upload
50 views

Lec 2 Css

There are four CSS combinators that allow selecting elements based on their relationship to other elements: the descendant selector, child selector, adjacent sibling selector, and general sibling selector. The descendant selector selects elements that are descendants of another element. The child selector selects elements that are direct children. The adjacent sibling selector selects siblings immediately following. And the general sibling selector selects all siblings following.

Uploaded by

Usman Naveed
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
50 views

Lec 2 Css

There are four CSS combinators that allow selecting elements based on their relationship to other elements: the descendant selector, child selector, adjacent sibling selector, and general sibling selector. The descendant selector selects elements that are descendants of another element. The child selector selects elements that are direct children. The adjacent sibling selector selects siblings immediately following. And the general sibling selector selects all siblings following.

Uploaded by

Usman Naveed
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/ 4

CSS Combinators

A CSS selector can contain more than one simple selector. Between the simple selectors, we can
include a combinator.
There are four different combinators in CSS:
✓ descendant selector (space)
✓ child selector (>)
✓ adjacent sibling selector (+)
✓ general sibling selector (~)

Descendant Selector:
The descendant selector matches all elements that are descendants of a specified element.
The following example selects all <p> elements inside <div> elements
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Descendant Selector</h2>
<p>Printas is a Institute</p>
<div>
<p>Usman is a student</p>
<p>Usman is a student.</p>

</div>
<p>Usman is a student.</p>
</body>
</html>

Child Selector (>):


The child selector selects all elements that are the children of a specified element.
The following example selects all <p> elements that are children of a <div> element
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Child Selector</h2>
<p>The child selector (>) selects all elements that are the children of a specified element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<p>Paragraph 3 in the div.</p>
</div>
<p>Paragraph 4. Not in a div.</p>
</body>
</html>

Adjacent Sibling Selector (+):


The adjacent sibling selector is used to select an element that is directly after another specific
element.
Sibling elements must have the same parent element, and "adjacent" means "immediately
following".
The following example selects the first <p> element that are placed immediately after <div>
elements
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: pink;
}
</style>
</head>
<body>
<h2>Adjacent Sibling Selector</h2>
<p>The + selector is used to select an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div
elements:</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. After a div.</p>
<div>
<p>Paragraph 5 in the div.</p>
</div>
<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>
</body>
</html>

General Sibling Selector (~):


The general sibling selector selects all elements that are next siblings of a specified element.
The following example selects all <p> elements that are next siblings of <div> elements
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: purple;
}
</style>
</head>
<body>
<h2>General Sibling Selector</h2>
<p>The general sibling selector (~) selects all elements that are next siblings of a specified
element.</p>
<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<p>Paragraph 3.</p>
<p>Some code.</p>
<p>Paragraph 3.</p>
<p>Some code.</p>
<div>
<p>Paragraph 2.</p></div></body></html>

You might also like