Apply style to first div with specific class in DOM-CodePudding

I have a reusable accordion component but what I'm trying to achieve is for the first accordion to have a greater padding set, compared to the others. Can this be achieved via CSS? If not, what's the best way to achieve this via jQuery/JS.

Note: I can't just add a class to the first section, as I've stated, it's a reusable component, so the markup is always the same.

<!-- Apply padding to this section only -->
<section >
 <p>Some content in here</p> 
</section>

<section >
 <p>Some content in here</p> 
</section>

<section >
 <p>Some content in here</p> 
</section>

<section >
 <p>Some content in here</p> 
</section>

CodePudding user response：

Update: first-of child won't work and I have updated the answer

You can achieve this way by a workaround with pure CSS: select every element of the class that is the sibling of the same class -> invert it, -> select by the class again.

Working Codepen: https://codepen.io/tusharg09/pen/oNoOxrq

:not(.accordion-wrapper ~ .accordion-wrapper).accordion-wrapper {
    color: red;
}

<section >
  <p>Some content in here</p>
</section>

<section >
  <p>Some content in here</p>
</section>

<section >
  <p>Some content in here</p>
</section>

<section >
  <p>Some content in here</p>
</section>

CodePudding user response：

Assuming that accordion sections are the only children of some parent element it can be done via css. You can use first-child pseudo class:

.accordion-wrapper:first-child {
   ...
}

CodePudding user response：

While in the simple cases you may be able to use CSS only, for a general solution which works whatever the HTML structure is, you need to use a bit of JS.

This snippet finds the very first occurence of the element with that class in the whole document. It then adds another class to it which sets the padding.

<!doctype html>
<html>

<head>
  <style>
    .accordion-wrapper.extra {
      padding: 10px;
    }
  </style>
</head>

<body>
  <!-- Apply padding to this section only -->
  <section >
    <p>Some content in here</p>
  </section>

  <section >
    <p>Some content in here</p>
  </section>

  <section >
    <p>Some content in here</p>
  </section>

  <section >
    <p>Some content in here</p>
  </section>

  <script>
    const first = document.querySelector('.accordion-wrapper');
    first.classList.add('extra');
  </script>
</body>

</html>

UPDATE: since giving the answer above, I've seen the HTML structure for this specific question and that can be solved by CSS only using:

main section:first-of-type

as the selector. Just be aware that if the structure changes it may not be right, as indeed the first answer may not be if other such sections are put in above main.

It is perhaps safest to combine the two approaches and in the JS select the first section within main. Depends on the actual use case of course.

CodePudding user response：

Well there are several ways to achieve this. Since you try to build an accordion so you basically know which of your accordion keys will be different shaped, right?

Therefore you can use for example, assigning a second class to your div. Or another way would be, :nth-child() like every second or third key will be shaped in another way. You can find the example code snippet outside of the Code itself.

.accordion-wrapper {
  display:flex;
  flex-direction: column;
}

.accordion-key {
  border: 1px solid #333;
  padding: 5px 0 5px 10px;
}

.accordion-keyBlack {
  background-color: #111;
  color: #fff;
  padding: 10px 0 10px 20px;
}

<div >
  <div >A</div>
  <div >B</div>
  <div >C</div>
  <div >D</div>
  <div >E</div>
</div>

or you can use :nth-child() for example to define that every second key is black or whatever. Further read, here: https://developer.mozilla.org/de/docs/Web/CSS/:nth-child

.accordion-key:nth-child(2n) {
  background-color: #111;
  color: #fff;
  padding: 10px 0 10px 20px;
}

Of course you can use JS as well, but therefore we would need more details, like the logic of key-arrangement itself.

CodePudding user response：

Select first div with specific class is not possible with CSS. The closest result is:

section {
  padding: 10px;
  margin: 10px;
  background: red;
}
.accordion-wrapper:first-child,
:not(.accordion-wrapper)   .accordion-wrapper {
  padding: 10px;
  background: yellow;
}

<section ></section>
<!-- first div with class is here -->
<section ></section>
<section ></section>
<section ></section>
<section ></section>
<section ></section>

It selects first child .accordion-wrapper:first-child or an element that is not preceded by an element with the same class :not(.accordion-wrapper) .accordion-wrapper.

Problem of this approach is this case:

section {
  padding: 10px;
  margin: 10px;
  background: red;
}
.accordion-wrapper:first-child,
:not(.accordion-wrapper)   .accordion-wrapper {
  padding: 10px;
  background: yellow;
}

<section ></section>
<!-- first div with class is here -->
<section ></section>
<section ></section>
<section ></section>
<section ></section>
<section ></section>
<section ></section>
<!-- but this is not first with class -->
<section ></section>
<section ></section>
<section ></section>