Target :first-of-type of generated classes

user_19373586 0
Viewed 42

I am getting a list of events by date, and im trying to create css classes based on the event date. The format of the date class is <div class="event_date_[here comes the date in a string like this dd-mm-yyyy]", they are displayed in ascending order so i ended up with this:

<div class="event">
 <div class="event_date_20-06-2020">title</div>
</div>
<div class="event">
 <div class="event_date_20-06-2020">title</div>
</div>
<div class="event">
 <div class="event_date_21-06-2020">title</div>
</div>
<div class="event">
 <div class="event_date_22-06-2020">title</div>
</div>
<div class="event">
 <div class="event_date_22-06-2020">title</div>
</div>

Is there any way i can display only first unique generated class? In my example i have 2 events for 20-06, one for 21-6 and two for 22-6. Having a hard time achieving something similar to

.event_date_[all-dates] {display:none;}
.event_date_[first-iteration-of-a-date]:first-of-type {display:block;}
css-selectors css
1 Answers

:first-of-type works first on the element type, but If you change a bit your markup and it's fine to write some extra CSS then is doable, e.g.

[data-date^="01"] + [data-date^="01"],
[data-date^="02"] + [data-date^="02"],
[data-date^="03"] + [data-date^="03"],
[data-date^="04"] + [data-date^="04"],
[data-date^="05"] + [data-date^="05"],
[data-date^="06"] + [data-date^="06"],
[data-date^="07"] + [data-date^="07"],
[data-date^="08"] + [data-date^="08"],
[data-date^="09"] + [data-date^="09"],
[data-date^="10"] + [data-date^="10"],
[data-date^="11"] + [data-date^="11"],
[data-date^="12"] + [data-date^="12"],
[data-date^="13"] + [data-date^="13"],
[data-date^="14"] + [data-date^="14"],
[data-date^="15"] + [data-date^="15"],
[data-date^="16"] + [data-date^="16"],
[data-date^="17"] + [data-date^="17"],
[data-date^="18"] + [data-date^="18"],
[data-date^="19"] + [data-date^="19"],
[data-date^="20"] + [data-date^="20"],
[data-date^="21"] + [data-date^="21"],
[data-date^="22"] + [data-date^="22"],
[data-date^="23"] + [data-date^="23"],
[data-date^="24"] + [data-date^="24"],
[data-date^="25"] + [data-date^="25"],
[data-date^="26"] + [data-date^="26"],
[data-date^="27"] + [data-date^="27"],
[data-date^="28"] + [data-date^="28"],
[data-date^="29"] + [data-date^="29"],
[data-date^="30"] + [data-date^="30"],
[data-date^="31"] + [data-date^="31"] {
  display: none;
}
<div class="event" data-date="20062022">
 <div>title 20 06 2022 (first)</div>
</div>
<div class="event" data-date="20062022">
 <div>title 20 06 2022</div>
</div>
<div class="event" data-date="21062022">
 <div>title 21 06 2022 (first)</div>
</div>
<div class="event" data-date="21062022">
 <div>title 21 06 2022</div>
</div>
<div class="event" data-date="21062022">
 <div>title 21 06 2022</div>
</div>
<div class="event" data-date="22062022">
 <div>title 22 06 2022 (first)</div>
</div>
<div class="event" data-date="22062022">
 <div>title 22 06 2022</div>
</div>
<div class="event" data-date="23062022">
 <div>title 23 06 2022 (first)</div>
</div>

Note: this works if you have not events exactly separated by 30 days, since it works by checking consecutive equal days (and not months)

user_10988510
Related