Skip to main content

Return to Answer

Add demostration for nested descendants
Source Link
Frox
Frox
  • 679
  • 1
  • 9

Analyzing the existing selector:

*:not(my-component) *

* at the beginning is irrelevant.

:not(my-component) selects everything that is not my-component, which includes <html> and <body>.

The universal selector at the end selects everything descendant from <html>. Which is everything except the <html> itself.

That is not what we want.

Analyzing alternative:

body :not(my-component *)

body at the beginning to limit ourselves to descendants of <body>.

my-component * selects all children of my-component. Then we pass the above as the argument of :not() i.e. :not(my-component *) to say everything that is not a descendant of my-component.

All together we have:

All elements that are descendants of body but not descendants of my-component.

This does include my-component itself but I believe that is what you are looking for:

Style all elements that are NOT inside my-component

my-component * {
  color: green;
}

/* Style all elements that are descendants of body and NOT inside my-component */
body :not(my-component *) {
  color: red;
}

body :not(my-component *) h4 {
  color: blue;
}

.container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
<div class="container">
  <p>This paragraph is outside the special container → should be <strong style="color:red;">RED</strong>.</p>
  <h4>Demostration h4 → should be BLUE.</h4>
</div>

<my-component class="container">
  <p>This paragraph is inside the special container → should be <strong style="color:green;">GREEN</strong>.</p>
  <span>Another element inside → GREEN</span>
</my-component>

<div class="container">
  <p>Another outside paragraph → RED</p>
</div>

Analyzing the existing selector:

*:not(my-component) *

* at the beginning is irrelevant.

:not(my-component) selects everything that is not my-component, which includes <html> and <body>.

The universal selector at the end selects everything descendant from <html>. Which is everything except the <html> itself.

That is not what we want.

Analyzing alternative:

body :not(my-component *)

body at the beginning to limit ourselves to descendants of <body>.

my-component * selects all children of my-component. Then we pass the above as the argument of :not() i.e. :not(my-component *) to say everything that is not a descendant of my-component.

All together we have:

All elements that are descendants of body but not descendants of my-component.

This does include my-component itself but I believe that is what you are looking for:

Style all elements that are NOT inside my-component

my-component * {
  color: green;
}

/* Style all elements that are descendants of body and NOT inside my-component */
body :not(my-component *) {
  color: red;
}

.container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
<div class="container">
  <p>This paragraph is outside the special container → should be <strong style="color:red;">RED</strong>.</p>
</div>

<my-component class="container">
  <p>This paragraph is inside the special container → should be <strong style="color:green;">GREEN</strong>.</p>
  <span>Another element inside → GREEN</span>
</my-component>

<div class="container">
  <p>Another outside paragraph → RED</p>
</div>

Analyzing the existing selector:

*:not(my-component) *

* at the beginning is irrelevant.

:not(my-component) selects everything that is not my-component, which includes <html> and <body>.

The universal selector at the end selects everything descendant from <html>. Which is everything except the <html> itself.

That is not what we want.

Analyzing alternative:

body :not(my-component *)

body at the beginning to limit ourselves to descendants of <body>.

my-component * selects all children of my-component. Then we pass the above as the argument of :not() i.e. :not(my-component *) to say everything that is not a descendant of my-component.

All together we have:

All elements that are descendants of body but not descendants of my-component.

This does include my-component itself but I believe that is what you are looking for:

Style all elements that are NOT inside my-component

my-component * {
  color: green;
}

/* Style all elements that are descendants of body and NOT inside my-component */
body :not(my-component *) {
  color: red;
}

body :not(my-component *) h4 {
  color: blue;
}

.container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
<div class="container">
  <p>This paragraph is outside the special container → should be <strong style="color:red;">RED</strong>.</p>
  <h4>Demostration h4 → should be BLUE.</h4>
</div>

<my-component class="container">
  <p>This paragraph is inside the special container → should be <strong style="color:green;">GREEN</strong>.</p>
  <span>Another element inside → GREEN</span>
</my-component>

<div class="container">
  <p>Another outside paragraph → RED</p>
</div>

Post Undeleted by Frox
Changed answer after understanding the question correctly
Source Link
Frox
Frox
  • 679
  • 1
  • 9

This behavior is documented in the docs asAnalyzing the last bullet pointexisting selector:

If any selector passed to the :not() pseudo-class is invalid or not supported by the browser, the whole rule will be invalidated.

*:not(my-component) *

Since * at the beginning is irrelevant.

:not(my-component) selects everything that is not a valid selectormy-component, you can usewhich includes <html> and <body>.

The universal selector at the end selects everything descendant from <html>. Which is everything except the <html> itself.

That is not what we want.

Analyzing alternative:is() pseudo-class

body :not(my-component *)

body at the beginning to actually makelimit ourselves to descendants of <body>.

my-component * selects all children of my-component. Then we pass the desired selectionabove as the argument of :not() i.e. :not(my-component *) to say everything that is not a descendant of my-component.

All together we have:

All elements that are descendants of body but not descendants of my-component.

This does include my-component itself but I believe that is what you are looking for:

Style all elements that are NOT inside my-component

my-component * {
  color: green;
}

/* Style all elements that are descendants of body and NOT inside my-component */
*body :not(:is(my-component)) *) {
  color: red;
}

my-component * {
  color: green;
}

.container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
<div class="container">
  <p>This paragraph is outside the special container → should be <strong style="color:red;">RED</strong>.</p>
</div>

<my-component class="container">
  <p>This paragraph is inside the special container → should be <strong style="color:green;">GREEN</strong>.</p>
  <span>Another element inside → GREEN</span>
</my-component>

<div class="container">
  <p>Another outside paragraph → RED</p>
</div>

This behavior is documented in the docs as the last bullet point:

If any selector passed to the :not() pseudo-class is invalid or not supported by the browser, the whole rule will be invalidated.

Since *:not(my-component) is not a valid selector, you can use the :is() pseudo-class to actually make the desired selection.

/* Style all elements that are NOT inside my-component */
*:not(:is(my-component)) * {
  color: red;
}

my-component * {
  color: green;
}

.container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
<div class="container">
  <p>This paragraph is outside the special container → should be <strong style="color:red;">RED</strong>.</p>
</div>

<my-component class="container">
  <p>This paragraph is inside the special container → should be <strong style="color:green;">GREEN</strong>.</p>
  <span>Another element inside → GREEN</span>
</my-component>

<div class="container">
  <p>Another outside paragraph → RED</p>
</div>

Analyzing the existing selector:

*:not(my-component) *

* at the beginning is irrelevant.

:not(my-component) selects everything that is not my-component, which includes <html> and <body>.

The universal selector at the end selects everything descendant from <html>. Which is everything except the <html> itself.

That is not what we want.

Analyzing alternative:

body :not(my-component *)

body at the beginning to limit ourselves to descendants of <body>.

my-component * selects all children of my-component. Then we pass the above as the argument of :not() i.e. :not(my-component *) to say everything that is not a descendant of my-component.

All together we have:

All elements that are descendants of body but not descendants of my-component.

This does include my-component itself but I believe that is what you are looking for:

Style all elements that are NOT inside my-component

my-component * {
  color: green;
}

/* Style all elements that are descendants of body and NOT inside my-component */
body :not(my-component *) {
  color: red;
}

.container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
<div class="container">
  <p>This paragraph is outside the special container → should be <strong style="color:red;">RED</strong>.</p>
</div>

<my-component class="container">
  <p>This paragraph is inside the special container → should be <strong style="color:green;">GREEN</strong>.</p>
  <span>Another element inside → GREEN</span>
</my-component>

<div class="container">
  <p>Another outside paragraph → RED</p>
</div>

Post Deleted by Frox
fix incorrect selector
Source Link
Frox
Frox
  • 679
  • 1
  • 9

This behavior is documented in the docs as the last bullet point:

If any selector passed to the :not() pseudo-class is invalid or not supported by the browser, the whole rule will be invalidated.

Since .*:not(my-component-class) is not a valid selector, you can use the :is() pseudo-class to actually make the desired selection.

/* Style all elements that are NOT inside my-component */
*:not(:is(my-component)) * {
  color: red;
}

my-component * {
  color: green;
}

.container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
<div class="container">
  <p>This paragraph is outside the special container → should be <strong style="color:red;">RED</strong>.</p>
</div>

<my-component class="container">
  <p>This paragraph is inside the special container → should be <strong style="color:green;">GREEN</strong>.</p>
  <span>Another element inside → GREEN</span>
</my-component>

<div class="container">
  <p>Another outside paragraph → RED</p>
</div>

This behavior is documented in the docs as the last bullet point:

If any selector passed to the :not() pseudo-class is invalid or not supported by the browser, the whole rule will be invalidated.

Since .my-component-class is not a valid selector, you can use the :is() pseudo-class to actually make the desired selection.

/* Style all elements that are NOT inside my-component */
*:not(:is(my-component)) * {
  color: red;
}

my-component * {
  color: green;
}

.container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
<div class="container">
  <p>This paragraph is outside the special container → should be <strong style="color:red;">RED</strong>.</p>
</div>

<my-component class="container">
  <p>This paragraph is inside the special container → should be <strong style="color:green;">GREEN</strong>.</p>
  <span>Another element inside → GREEN</span>
</my-component>

<div class="container">
  <p>Another outside paragraph → RED</p>
</div>

This behavior is documented in the docs as the last bullet point:

If any selector passed to the :not() pseudo-class is invalid or not supported by the browser, the whole rule will be invalidated.

Since *:not(my-component) is not a valid selector, you can use the :is() pseudo-class to actually make the desired selection.

/* Style all elements that are NOT inside my-component */
*:not(:is(my-component)) * {
  color: red;
}

my-component * {
  color: green;
}

.container {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}
<div class="container">
  <p>This paragraph is outside the special container → should be <strong style="color:red;">RED</strong>.</p>
</div>

<my-component class="container">
  <p>This paragraph is inside the special container → should be <strong style="color:green;">GREEN</strong>.</p>
  <span>Another element inside → GREEN</span>
</my-component>

<div class="container">
  <p>Another outside paragraph → RED</p>
</div>

Source Link
Frox
Frox
  • 679
  • 1
  • 9