Selecting the first occurrence of an element with a particular class, if the element is not immediate child, by using only CSS

Asked Dec 10 '18 at 10:50

Active Dec 10 '18 at 10:52

Viewed 146 times

Here is the sample code.

<div class="main-content">

  <div class="some-class">Some Class</div>

  <div class="my-class">My Class</div>

  <div class="some-other-class"> Some Other Class</div>

  <div class="my-class">My Class</div>

</div>

Inside the main content i have class my-class which is not the immediate child of the parent main-content. I want to select the first my-class element. There are two, i need only the first one. I tried :first-child , but that does not work because it is not immediate child , if i remove the some-class element it will work. I also tried :first-of-type, that does not work either.

Is there way in CSS by which i can do that because i have some restrictions i.e

I can't change the html
I cannot use javascript or jquery for this , because i don't have access to both of these things.

I have to do it only through CSS. I only have access to CSS.

asked Dec 10 '18 at 10:50

Atul kumar singh

no you cannot ... – Temani Afif Dec 10 '18 at 10:51
Is `.some-class` the only element before your first `.my-class` ? – Arkellys Dec 10 '18 at 10:55
@Arkellys , yes that is the only element before .my-class . – Atul kumar singh Dec 10 '18 at 10:56
@Atulkumarsingh If the duplicate questions don't anwser your question, you can do `.some-class + .my-class` – Arkellys Dec 10 '18 at 10:57
Or in general, use this workaround: set the styles on `my-class` and then _reset_ the styles on the selector `my-class ~ .my-class`. It's not elegant, but it works. – Mr Lister Dec 10 '18 at 11:08

Selecting the first occurrence of an element with a particular class, if the element is not immediate child, by using only CSS

0 Answers0