Revisions to Is there a CSS parent selector?

added 2 characters in body

Source Link

edited Sep 20, 2024 at 11:12

273.5k
85
450
540

You can use :has() pseudo-class (status: working draft, specifications, MDN, caniuse) for this:

li:has(> a.active) {
  outline: thin dotted red;
}

<ul>
  <li><a href="#">a</a></li>
  <li><a href="#" class="active">a.active</a></li>
  <li><a href="#">a</a></li>
</ul>

In fact, this pseudo-class can be used to match an element that has a specific element as child, grand child, next sibling or subsequent sibling:

section, h1, p {
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

h1:has(> .ref) {
  outline: thin dotted red;
}

h1:has(.ref) {
  outline: thin dotted red;
}

h1:has(+ .ref) {
  outline: thin dotted red;
}

h1:has(~ .ref) {
  outline: thin dotted red;
}

<section>
  <h1>
    heading
    <span class="ref">.ref</span>
  </h1>
</section>

<section>
  <h1>
    heading
    <span>
      span
      <span class="ref">.ref</span>
    </span>
  </h1>
</section>

<section>
  <h1>heading</h1>
  <p class="ref">.ref</p>
</section>

<section>
  <h1>heading</h1>
  <p>paragraph</p>
  <p class="ref">.ref</p>
</section>

The concerns I raised in my original answer are still relevant:

For example, if you wrote:
body:has(a.active) { background: red; }
Then the browser will have to wait until it has loaded and parsed everything until the to</body> to determine if the page should be red or notor not.

You can use :has() pseudo-class (status: working draft, specifications, MDN, caniuse) for this:

li:has(> a.active) {
  outline: thin dotted red;
}

<ul>
  <li><a href="#">a</a></li>
  <li><a href="#" class="active">a.active</a></li>
  <li><a href="#">a</a></li>
</ul>

In fact, this pseudo-class can be used to match an element that has a specific element as child, grand child, next sibling or subsequent sibling:

section, h1, p {
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

h1:has(> .ref) {
  outline: thin dotted red;
}

h1:has(.ref) {
  outline: thin dotted red;
}

h1:has(+ .ref) {
  outline: thin dotted red;
}

h1:has(~ .ref) {
  outline: thin dotted red;
}

<section>
  <h1>
    heading
    <span class="ref">.ref</span>
  </h1>
</section>

<section>
  <h1>
    heading
    <span>
      span
      <span class="ref">.ref</span>
    </span>
  </h1>
</section>

<section>
  <h1>heading</h1>
  <p class="ref">.ref</p>
</section>

<section>
  <h1>heading</h1>
  <p>paragraph</p>
  <p class="ref">.ref</p>
</section>

The concerns I raised in my original answer are still relevant:

For example, if you wrote:
body:has(a.active) { background: red; }
Then the browser will have to wait until it has loaded and parsed everything until the to determine if the page should be red or not.

You can use :has() pseudo-class (status: working draft, specifications, MDN, caniuse) for this:

li:has(> a.active) {
  outline: thin dotted red;
}

<ul>
  <li><a href="#">a</a></li>
  <li><a href="#" class="active">a.active</a></li>
  <li><a href="#">a</a></li>
</ul>

In fact, this pseudo-class can be used to match an element that has a specific element as child, grand child, next sibling or subsequent sibling:

section, h1, p {
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

h1:has(> .ref) {
  outline: thin dotted red;
}

h1:has(.ref) {
  outline: thin dotted red;
}

h1:has(+ .ref) {
  outline: thin dotted red;
}

h1:has(~ .ref) {
  outline: thin dotted red;
}

<section>
  <h1>
    heading
    <span class="ref">.ref</span>
  </h1>
</section>

<section>
  <h1>
    heading
    <span>
      span
      <span class="ref">.ref</span>
    </span>
  </h1>
</section>

<section>
  <h1>heading</h1>
  <p class="ref">.ref</p>
</section>

<section>
  <h1>heading</h1>
  <p>paragraph</p>
  <p class="ref">.ref</p>
</section>

The concerns I raised in my original answer are still relevant:

For example, if you wrote:
body:has(a.active) { background: red; }
Then the browser will have to wait until it has loaded and parsed everything until the </body> to determine if the page should be red or not.

deleted 1 character in body

Source Link

edited Apr 22, 2024 at 6:59

Salman Arshad

273.5k
85
450
540

You can use :has() pseudo-class (status: working draft, specifications, MDN, caniuse) for this:

li:has(> a.active) {
  outline: thin dotted red;
}

<ul>
  <li><a href="#">a</a></li>
  <li><a href="#" class="active">a.active</a></li>
  <li><a href="#">a</a></li>
</ul>

In fact, this pseudo-class can be used to match an element that has a specific element as child, grand child, next sibling or subsequent sibling:

secctionsection, h1, p {
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

h1:has(> .ref) {
  outline: thin dotted red;
}

h1:has(.ref) {
  outline: thin dotted red;
}

h1:has(+ .ref) {
  outline: thin dotted red;
}

h1:has(~ .ref) {
  outline: thin dotted red;
}

<section>
  <h1>
    heading
    <span class="ref">.ref</span>
  </h1>
</section>

<section>
  <h1>
    heading
    <span>
      span
      <span class="ref">.ref</span>
    </span>
  </h1>
</section>

<section>
  <h1>heading</h1>
  <p class="ref">.ref</p>
</section>

<section>
  <h1>heading</h1>
  <p>paragraph</p>
  <p class="ref">.ref</p>
</section>

The concerns I raised in my original answer are still relevant:

For example, if you wrote:
body:has(a.active) { background: red; }
Then the browser will have to wait until it has loaded and parsed everything until the to determine if the page should be red or not.

You can use :has() pseudo-class (status: working draft, specifications, MDN, caniuse) for this:

li:has(> a.active) {
  outline: thin dotted red;
}

<ul>
  <li><a href="#">a</a></li>
  <li><a href="#" class="active">a.active</a></li>
  <li><a href="#">a</a></li>
</ul>

In fact, this pseudo-class can be used to match an element that has a specific element as child, grand child, next sibling or subsequent sibling:

secction, h1, p {
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

h1:has(> .ref) {
  outline: thin dotted red;
}

h1:has(.ref) {
  outline: thin dotted red;
}

h1:has(+ .ref) {
  outline: thin dotted red;
}

h1:has(~ .ref) {
  outline: thin dotted red;
}

<section>
  <h1>
    heading
    <span class="ref">.ref</span>
  </h1>
</section>

<section>
  <h1>
    heading
    <span>
      span
      <span class="ref">.ref</span>
    </span>
  </h1>
</section>

<section>
  <h1>heading</h1>
  <p class="ref">.ref</p>
</section>

<section>
  <h1>heading</h1>
  <p>paragraph</p>
  <p class="ref">.ref</p>
</section>

The concerns I raised in my original answer are still relevant:

For example, if you wrote:
body:has(a.active) { background: red; }
Then the browser will have to wait until it has loaded and parsed everything until the to determine if the page should be red or not.

You can use :has() pseudo-class (status: working draft, specifications, MDN, caniuse) for this:

li:has(> a.active) {
  outline: thin dotted red;
}

<ul>
  <li><a href="#">a</a></li>
  <li><a href="#" class="active">a.active</a></li>
  <li><a href="#">a</a></li>
</ul>

In fact, this pseudo-class can be used to match an element that has a specific element as child, grand child, next sibling or subsequent sibling:

section, h1, p {
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

h1:has(> .ref) {
  outline: thin dotted red;
}

h1:has(.ref) {
  outline: thin dotted red;
}

h1:has(+ .ref) {
  outline: thin dotted red;
}

h1:has(~ .ref) {
  outline: thin dotted red;
}

<section>
  <h1>
    heading
    <span class="ref">.ref</span>
  </h1>
</section>

<section>
  <h1>
    heading
    <span>
      span
      <span class="ref">.ref</span>
    </span>
  </h1>
</section>

<section>
  <h1>heading</h1>
  <p class="ref">.ref</p>
</section>

<section>
  <h1>heading</h1>
  <p>paragraph</p>
  <p class="ref">.ref</p>
</section>

The concerns I raised in my original answer are still relevant:

For example, if you wrote:
body:has(a.active) { background: red; }
Then the browser will have to wait until it has loaded and parsed everything until the to determine if the page should be red or not.

revised for 2024. note that the selector specs is still working draft and not published specs

Source Link

edited Apr 20, 2024 at 19:16

Salman Arshad

273.5k
85
450
540

There is no parent selector; just the way there is no previous sibling selector. One good reason for not having these selectors is because the browser has to traverse through all children of an element to determine whether or not a class should be applied. For exampleYou can use :has() pseudo-class (status: working draft, if you wrotespecifications, MDN, caniuse) for this:

body:contains-selector(a.active) { background: red; }

li:has(> a.active) {
  outline: thin dotted red;
}

<ul>
  <li><a href="#">a</a></li>
  <li><a href="#" class="active">a.active</a></li>
  <li><a href="#">a</a></li>
</ul>

Then the browser will haveIn fact, this pseudo-class can be used to wait until itmatch an element that has loaded and parsed everything until the </body> to determine if the page should be reda specific element as child, grand child, next sibling or not.subsequent sibling:

secction, h1, p {
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

h1:has(> .ref) {
  outline: thin dotted red;
}

h1:has(.ref) {
  outline: thin dotted red;
}

h1:has(+ .ref) {
  outline: thin dotted red;
}

h1:has(~ .ref) {
  outline: thin dotted red;
}

<section>
  <h1>
    heading
    <span class="ref">.ref</span>
  </h1>
</section>

<section>
  <h1>
    heading
    <span>
      span
      <span class="ref">.ref</span>
    </span>
  </h1>
</section>

<section>
  <h1>heading</h1>
  <p class="ref">.ref</p>
</section>

<section>
  <h1>heading</h1>
  <p>paragraph</p>
  <p class="ref">.ref</p>
</section>

The article Why we don't have a parent selector explains itconcerns I raised in detail.my original answer are still relevant:

For example, if you wrote:
body:has(a.active) { background: red; }
Then the browser will have to wait until it has loaded and parsed everything until the to determine if the page should be red or not.

There is no parent selector; just the way there is no previous sibling selector. One good reason for not having these selectors is because the browser has to traverse through all children of an element to determine whether or not a class should be applied. For example, if you wrote:

body:contains-selector(a.active) { background: red; }

Then the browser will have to wait until it has loaded and parsed everything until the </body> to determine if the page should be red or not.

The article Why we don't have a parent selector explains it in detail.

You can use :has() pseudo-class (status: working draft, specifications, MDN, caniuse) for this:

li:has(> a.active) {
  outline: thin dotted red;
}

<ul>
  <li><a href="#">a</a></li>
  <li><a href="#" class="active">a.active</a></li>
  <li><a href="#">a</a></li>
</ul>

In fact, this pseudo-class can be used to match an element that has a specific element as child, grand child, next sibling or subsequent sibling:

secction, h1, p {
  font-size: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

h1:has(> .ref) {
  outline: thin dotted red;
}

h1:has(.ref) {
  outline: thin dotted red;
}

h1:has(+ .ref) {
  outline: thin dotted red;
}

h1:has(~ .ref) {
  outline: thin dotted red;
}

<section>
  <h1>
    heading
    <span class="ref">.ref</span>
  </h1>
</section>

<section>
  <h1>
    heading
    <span>
      span
      <span class="ref">.ref</span>
    </span>
  </h1>
</section>

<section>
  <h1>heading</h1>
  <p class="ref">.ref</p>
</section>

<section>
  <h1>heading</h1>
  <p>paragraph</p>
  <p class="ref">.ref</p>
</section>

The concerns I raised in my original answer are still relevant:

For example, if you wrote:
body:has(a.active) { background: red; }
Then the browser will have to wait until it has loaded and parsed everything until the to determine if the page should be red or not.