I need to find all elements with the same class name and address the first one

Question

I have a problem and I am not sure how to solve it or if it's even possible: in WordPress I have built a simple event calender. Now I want to style every first event of a certain date. How can I select this first event?

https://arneteubel.com/kunden/rz-test/termine/

This is the demo page. Every event gets it's date as a class so what I am looking for is something like:

Find elements with the same class
Select the first element and apply a style

I can not group my events by date…

Now is that even possible? Maybe with PHP or jQuery?

Thank you!

No sorry, that won't work as it makes all backgrounds yellow. I need to find all divs with the class "Feb12023" for example but only style the first one of them. But "Feb12023" ist dynamic as it is the date of the event. — Arne Teubel, Feb 02 '22 at 01:32
Sorry for my previous comment :-) .. remove anything you added from my comment and take a look at my answer below — Mohamed-Yousef, Feb 02 '22 at 01:55

Mohamed-Yousef · Accepted Answer · 2022-02-02T01:46:08.863

I prefer to work with data- attribute instead of classes

data-date="feb34454" instead of class="feb34454"

See the next example

$(document).ready(function(){
  $(".ct-nestable-shortcode").each(function(){
    let the_date = $(this).find("> div").data('date');
    $("[data-date='"+the_date+"']:first").css("background" , "yellow");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ct-nestable-shortcode">
  <div data-date="feb34454">feb34454</div>
</div>
<div class="ct-nestable-shortcode">
  <div data-date="feb34454">feb34454</div>
</div>
<div class="ct-nestable-shortcode">
  <div data-date="feb34454">feb34454</div>
</div>

Note: Don't forget to include jquery

score 0 · Answer 2 · answered Feb 02 '22 at 01:58

You should use CSS for styles if at all possible.

Here's a CSS solution stolen from this answer:

 /* 
 * Select all .red children of .home, including the first one,
 * and give them a border.
 */
.home > .red {
    border: 1px solid red;
}

... then "undo" the styles for elements with the class that come after the first one, using the general sibling combinator ~ in an overriding rule:

/* 
 * Select all but the first .red child of .home,
 * and remove the border from the previous rule.
 */
.home > .red ~ .red {
    border: none;
}

Thank you @Brian Danowski. This won't work since my class names are dynamic depending on the date of the event. That's what made it tricky. — Arne Teubel, Feb 02 '22 at 08:48

I need to find all elements with the same class name and address the first one

2 Answers2