Skip to content

Commit

Permalink
fix(css): remove an outdated note from CSS nesting page
Browse files Browse the repository at this point in the history
  • Loading branch information
OnkarRuikar committed Jan 5, 2025
1 parent 178630a commit d9af1bf
Showing 1 changed file with 4 additions and 7 deletions.
11 changes: 4 additions & 7 deletions files/en-us/web/css/css_nesting/using_css_nesting/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,7 @@ parent child {

### Examples

In these examples, one without and one with the `&` nesting selector, the `<input>` inside the `<label>` is being styled differently to the `<input>` that is a sibling of a `<label>`. This demonstrates the impact of omitting the `&` nesting selector.

> [!NOTE]
> This example demonstrates different outputs in browsers implementing the original specification versus the current nesting spec. The original, pre-August 2023 nesting spec that was implemented in Chrome or Safari, requires the `&` nesting combinator. If your browser supports the current spec, the output of both examples matches that of the second example.
In these examples, one without and one with the `&` nesting selector, the `<input>` inside the `<label>` is being styled differently to the `<input>` that is a sibling of a `<label>`.

#### Without nesting selector

Expand Down Expand Up @@ -89,6 +86,7 @@ label {
/* styles for label */
font-family: system-ui;
font-size: 1.25rem;

input {
/* styles for input in a label */
border: blue 2px dashed;
Expand All @@ -102,9 +100,7 @@ label {

#### With nesting selector

##### HTML

```html-nolint
```html-nolint hidden
<form>
<label for="name">Name:
<input type="text" id="name" />
Expand Down Expand Up @@ -134,6 +130,7 @@ label {
/* styles for label */
font-family: system-ui;
font-size: 1.25rem;

& input {
/* styles for input in a label */
border: blue 2px dashed;
Expand Down

0 comments on commit d9af1bf

Please sign in to comment.