Html Question posted in
Some basic documentation can be found here.

Html – CSS ":is()" pseudo-class with relative selectors

I want to style specific "sections that are directly inside the body" and "sections that are directly inside a div directly inside the body" with the ":is()" pseudo-class, without the redundancy (with relative selectors).
I have the following code in a index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css">
    <title>Test :is() Selector</title>
  </head>
  <body>
    <section>Section directly inside the body (styled).</section>
    <div>
      <section>Section directly inside a div wich is directly insdie the body (styled).</section>
    </div>
    <div>
      <div>
        <section>Section directly inside a div wich is directly inside another div which is directly inside the body (not styled).</section>
      </div>
    </div>
  </body>
</html>

and the following css in a style.css file:

body > :is(section, div > section) {
  background-color: lightblue;
  padding: 10px;
  border: 1px solid blue;
}

I tried searching about, but I was unsuccessful because all searches with the ":is()" pseudo-class and relative selectors send me straight to the relative selectors documentation, since "is" is a very common word without special characters.
This is my first question in stack (although I read this site every day for a long time), but what I need is some complex selector without redundancy that would have the same result as this CSS:

body > section, body > div > section {
  background-color: lightblue;
  padding: 10px;
  border: 1px solid blue;
}
Tags:

2

Answers


  1. 0

    You can use & and :is() like below:

    body {
   :is(&, & > div) > section {
    background-color: lightblue;
    padding: 10px;
    border: 1px solid blue;
  }
}
    <section>Section directly inside the body (styled).</section>
<div>
  <section>Section directly inside a div wich is directly insdie the body (styled).</section>
</div>
<div>
  <div>
    <section>Section directly inside a div wich is directly inside another div which is directly inside the body (not styled).</section>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    Here’s one solution (I’m Currently looking into why it works and will edit my answer with an explanation):

    :is(body, body > div) > section {
  background-color: lightblue;
  padding: 10px;
  border: 1px solid blue;
}
    <section>Section directly inside the body (styled).</section>
<div>
  <section>Section directly inside a div wich is directly insdie the body (styled).</section>
</div>
<div>
  <div>
    <section>Section directly inside a div wich is directly inside another div which is directly inside the body (not styled).</section>
  </div>
</div>

    If I’m understanding your question correctly (edit your question for clarity otherwise):

    You want to achieve this behaviour:

    body > section, body > div > section {
  background-color: lightblue;
  padding: 10px;
  border: 1px solid blue;
}

    But you want to make it more concise by using the :is() pseudo class, and when you say "without redundancy" you mean keeping the selector DRY?

    The current DRY selector you have doesn’t work correctly:

    body > :is(section, div > section) {
  background-color: lightblue;
  padding: 10px;
  border: 1px solid blue;
}
    <section>Section directly inside the body (styled).</section>
<div>
  <section>Section directly inside a div wich is directly insdie the body (styled).</section>
</div>
<div>
  <div>
    <section>Section directly inside a div wich is directly inside another div which is directly inside the body (not styled).</section>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search