CODEWITHSUNDEEP
javascripthtmlcsscss-selectors
IceRevenge
IceRevenge

Reputation: 1583

Can I select all child elements of a specific element with a specific class without writing a list of selectors for each child?

I have a html-body like in the following code-snippet:

div.element>h1, h2, p {
  color: red
}

.footer {
  background-color: blue
}
<html>

<body>
  <div id="1">
    <div class="element">
      <h1>Test 1</h1>
      <span>Link to interesting <a href="https://google.com">site A</a></span>
    </div>
  </div>

  <div id="2">
    <div class="element">
      <h2>Test 2</p>
      <span>Link to interesting <a href="https://google.com">site B</a></span>
    </div>
  </div>

  <div id="3">
    <div class="element">
      <h3>Dont color me red!</h3>
      <p>Test 3</p>
      <span>Link to interesting <a href="https://google.com">site C</a></span>
    </div>
  </div>

  <div class="footer">
    <h2>This is my footer</h2>
    <p>Do not color this text red!</p>
  </div>
</body>

</html>

Now I would like to color all "h1", "h2" and "p" elements that are a child of a "div" with class="element" in red. This means that the "h2" and "p" in the footer-div should not be colored red since they are not a child of a div with class="element".

I am aware that I could solve it like the following but there is a lot of repetition.

div.element>h1, div.element>h2, div.element>p {}

Is there any other way to select children of a div with different tags?

Note that I do not want any answers suggesting changes to the body of my html document. I am only interested in the css-selector. I also need to be able to select it in JavaScript using querySelectorAll.

Upvotes: 1

Views: 4150

Answers (2)

Mr Lister
Mr Lister

Reputation: 46559

If you want to use querySelectorAll, like you say in the comments to the first answer (which wasn't clear in your question), then the solution is to use two querySelectorAlls in sequence.

document.querySelectorAll('div.element').forEach(
  el => el.querySelectorAll('h1, h2, p').forEach(
    el => el.style.color = 'red'
  )
);
.footer {
  background-color: blue
}
<div id="1">
    <div class="element">
      <h1>Test 1</h1>
      <span>Link to interesting <a href="https://google.com">site A</a></span>
    </div>
  </div>

  <div id="2">
    <div class="element">
      <h2>Test 2</p>
      <span>Link to interesting <a href="https://google.com">site B</a></span>
    </div>
  </div>

  <div id="3">
    <div class="element">
      <h3>Dont color me red!</h3>
      <p>Test 3</p>
      <span>Link to interesting <a href="https://google.com">site C</a></span>
    </div>
  </div>

  <div class="footer">
    <h2>This is my footer</h2>
    <p>Do not color this text red!</p>
  </div>

But at that point it might be more straightforward to just use div.element>h1, div.element>h2, div.element>p in the stylesheet instead.

Upvotes: 1

IndustryDesigns
IndustryDesigns

Reputation: 2268

Within vanilla CSS, the cleanest you can select the required items inside the <div> element, is like so

.element h1, .element h2, .element p {}

If you want more succinct tidier code for CSS you could always look into SASS.

In SASS it would look like so: 

.element { 
  h1, h2, p { 
    color: red 
  } 
}

You can find SASS here: https://sass-lang.com/

Selecting in JS will not change based on using a preprocessor. All the preprocessor does is allow you to write CSS in a certain way, then converts it to normal CSS for the browser to read.

Hence if you want to select .element h1, .element h2, .element p in the cleanest way via JS, I would give those specific elements a class, for instance "red", and then use this class in JS to select them.

Upvotes: 1

Related Questions