Revision:
In CSS, a combinator is a symbol that relates two CSS selectors to each other in order to style elements in a certain way. Combinators allow to apply style rules to elements based on their parent elements or sibling elements.
CSS3 includes four types of combinators: the descendant combinator, the child combinator, the adjacent sibling combinator, and the general sibling combinator.
The descendant combinator is written as two selectors "separated by a single space", and targets all instances of the second selector that descend from (i.e., are nested inside) the first selector. It selects every instance of an element nested inside another, including child elements, child elements of those child elements, and so on.
#my-div p {
color: #e66e50;
font-size: 1.5rem;
}
Explanation: the descendant combinator "#my-div p" applies the associated rules to all <p> elements inside the <div> #my-div.
The child combinator is written as a "greater-than symbol (>)" placed between two CSS selectors. It targets all instances of an element that are direct descendants, or child elements, of another element. The style cascade stops after the first nesting level.
main p { color: #e66e50; }
main > p { font-size: 1.5rem; }
Explanation: in the example, a descendant combinator is used to color all paragraph text inside <main> orange, and a child combinator to style only the child paragraphs of <main> with a larger font size.
The adjacent sibling combinator is written as a "plus sign (+) between two CSS selectors". It targets an element matching the second selector only if it immediately follows an element that matches the first selector. Additionally, both elements must be children of the same parent element (and are thus called “sibling elements”).
h1 + p {
color: orange;
font-family: Avenir;
}
In the example, the first paragraph receives styling because it directly follows <h1>. However, a second paragraph does not.
The general sibling combinator is written as the "tilde symbol (~)" and targets all elements that follow a specific sibling element. Unlike the adjacent sibling selector, the targeted elements do not need to immediately follow the first element.
h1 ~ p {
color: orange;
font-family: Avenir;
}
Explanation: in the example, all <p> elements are styled because they are proceeded by <h1> in the document, despite not all being directly adjacent to each other.
In CSS, nested classes are used to create a style for one or more child elements. You can nest CSS as deeply as you want and the CSS will only apply to those that it is assigned to.
A CSS class is a style that can be applied to HTML elements. These are broken into different sections and when you want to apply a particular style, you include it on your HTML element with the class attribute.
Syntax:.class-Name{css properties:value;}
.hugeBox { width: 100%; }
.hugeBox-top { margin-top: 10px; }
.hugeBox-bottom { margin-bottom: 10px; }
.hugeBox-right { margin-right: 10px; }
.hugeBox-left { margin-left: 10px; }
Nested CSS classes can only be applied to child elements. You might have an outer CSS rule that looks like .parent-class { color: blue; } and then you would nest the CSS for children of this parent inside it like so: /*nested CSS rules go here*/
Before nesting, every selector needed to be explicitly declared, separately from one another. This leads to repetition, stylesheet bulk and a scattered authoring experience.
"before" example
.nesting {color: hotpink;}
.nesting > .is {color: rebeccapurple;}
.nesting > .is > .awesome {color: deeppink;}
"after" example
.nesting {color: hotpink;
> .is {color: rebeccapurple;
> .awesome {color: deeppink;}
}
}
Nesting reduces the need to repeat selectors while also co-locating style rules for related elements. It can also help styles match the HTML they target. Nesting can help with: organization, reducing file size, refactoring
<div class="nesting">
<div class="is">
<div class="awesome"></div>
</div>
</div>
<style>
@layer demo {
.nesting {background: hotpink;
> .is {background: rebeccapurple;
> .awesome {background: deeppink;}
}
}
}
@layer demo.support {
.nesting {inline-size: 25vmin; aspect-ratio: 1;display: grid;place-items: center;}
.nesting > * {grid-area: 1/1; }
.is {aspect-ratio: 1;inline-size: 50%; display: grid;place-items: center;}
.awesome {aspect-ratio: 1; inline-size: 50%;}
}
</style>
<div>
<section class="box">
<h4 class="title">This is title</h4>
<div class="content">This is content.</div>
<button class="button">This is button</button>
</section>
<section class="box1">
<h4 class="title1">This is title</h4>
<div class="content1">This is content.</div>
<button class="button1">This is button</button>
</section>
</div>
<style>
.box {background-color: blue;
.title {background-color: yellow;}
}
.box1 {background-color: skyblue;
&:hover {background-color: green;}
}
.box1 {background-color: skyblue;
.content1 {background-color: pink;}
}
</style>