| Introduction to CSS |
|---|
| Text and Font Styling |
|---|
| Box Model and Layout |
|---|
| Advanced Layout with Flexbox and Grid |
|---|
| Responsive Design |
|---|
| CSS Transitions and Animations |
|---|
1. Grouping Combinator (' , '):
The grouping combinator is used to apply the same styles to multiple selectors.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
color: blue;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>Paragraph</p>
</body>
</html>
In this example, ‘h1‘, ‘h2‘, and ‘p‘ elements will all have the color blue.
2. Descendant Combinator (' '):
The descendant combinator targets elements that are descendants (children, grandchildren, etc.) of a specified element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div p {
color: red;
}
</style>
</head>
<body>
<div>
<p>Paragraph inside a div</p>
<span>
<p>Paragraph inside a span inside a div</p>
</span>
</div>
<p>Paragraph outside of a div</p>
</body>
</html>
In this example, only the ‘p‘ elements that are inside a ‘div‘ will have the color red. The paragraph outside of the ‘div‘ will not be styled.
3. Child Combinator (' > '):
The child combinator targets elements that are direct children of a specified element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
color: green;
}
</style>
</head>
<body>
<div>
<p>Direct child paragraph inside a div</p>
<span>
<p>Nested paragraph inside a span inside a div</p>
</span>
</div>
<p>Paragraph outside of a div</p>
</body>
</html>
In this example, only the ‘p‘ elements that are direct children of a ‘div‘ will have the color green. The nested paragraph inside the ‘span‘ will not be styled.
4. Adjacent Sibling Combinator (' + '):
The adjacent sibling combinator targets elements that are immediately next to another specified element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 + p {
color: orange;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraph immediately after heading 1</p>
<p>Another paragraph</p>
<h1>Another Heading 1</h1>
<span>Span immediately after heading 1</span>
<p>Paragraph after a span</p>
</body>
</html>
In this example, only the ‘p‘ elements that are immediately after an ‘h1‘ will have the color orange.
5. General Sibling Combinator (' ~ '):
The general sibling combinator targets elements that are siblings of a specified element, regardless of whether they are immediately next to it.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 ~ p {
color: purple;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<p>Paragraph after heading 1</p>
<span>Span after paragraph</span>
<p>Another paragraph after heading 1</p>
<h1>Another Heading 1</h1>
<p>Paragraph after another heading 1</p>
</body>
</html>
In this example, all p elements that are siblings of an h1 will have the color purple, regardless of their position relative to the h1.
These combinators allow for complex and flexible selection of elements based on their relationship to other elements, enabling precise styling in CSS.
