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 class="accordion-wrapper">
<p>Some content in here</p>
</section>
<section class="accordion-wrapper">
<p>Some content in here</p>
</section>
<section class="accordion-wrapper">
<p>Some content in here</p>
</section>
<section class="accordion-wrapper">
<p>Some content in here</p>
</section>
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 class="accordion-wrapper">
<p>Some content in here</p>
</section>
<section class="accordion-wrapper">
<p>Some content in here</p>
</section>
<section class="accordion-wrapper">
<p>Some content in here</p>
</section>
<section class="accordion-wrapper">
<p>Some content in here</p>
</section>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 {
...
}
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 class="accordion-wrapper">
<p>Some content in here</p>
</section>
<section class="accordion-wrapper">
<p>Some content in here</p>
</section>
<section class="accordion-wrapper">
<p>Some content in here</p>
</section>
<section class="accordion-wrapper">
<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.