How can I get the first matched element with a CSS selector that has different parents?

Question

With the following HTML:

<div>
  <span class="something">...</span>
  <span class="something">...</span>
  <span class="something">...</span>
</div>
<article>
  <span class="something">...</span>
</article>

I want to find the first .something. How would I do this?

Did you tried this `div + .something {}` and `article + .something {}` ? — nitin9nair, Jul 14 '20 at 18:40
@CalebDenio but what if first span won't have `.something` class — sonic, Jul 14 '20 at 18:44
But that would only return divs with children "something". I think he wants it to return any HTML elements that have .something children and select the first of each. — Nathan Champion, Jul 14 '20 at 18:47

Unmitigated · Accepted Answer · 2020-07-15T15:42:15.943

2

You can't achieve this with only CSS. However, JavaScript's document.querySelector can be used to obtain the first element on the page matching a selector.

const first = document.querySelector('.something');
first.style.backgroundColor = "dodgerblue";

<div>
  <span class="something">...</span>
  <span class="something">...</span>
  <span class="something">...</span>
</div>
<article>
  <span class="something">...</span>
</article>

In order to affect pseudo elements, you can add a class to the element found with document.querySelector and add another style declaration in your CSS.

const first = document.querySelector('.something');
first.classList.add("first");

.something.first:after {
  content: "I'm the first one!";
  color: dodgerblue;
}

<div>
  <span class="something">...</span>
  <span class="something">...</span>
  <span class="something">...</span>
</div>
<article>
  <span class="something">...</span>
</article>

edited Jul 15 '20 at 15:42

answered Jul 14 '20 at 19:52

Unmitigated

76,500
11
62
80

I need an `::after`, can I do that? – Shamoon Jul 15 '20 at 15:32
If that's the case, then can I just do `.first::after`? – Shamoon Jul 15 '20 at 17:29
@Shamoon Yes, you can, unless you are going to be adding the class to other elements. – Unmitigated Jul 15 '20 at 17:30
I'll try in a bit and let you know – Shamoon Jul 15 '20 at 18:12

score 1 · Answer 2 · answered Jul 14 '20 at 19:30

It's not possible to achieve this purely with CSS. It would have been possible if all the elements with the .something class would have had the same parent (see this solution). But since they are spread over multiple parents this won't work.

You can use jQuery for this which has a :first selector:

$( ".something:first" ).css( "color", "red" );

div, article {
  padding: 1em;
  border: 1px solid silver;
  margin-bottom: 1em;
  width: 100px;
}

span { display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <span class="something">Something</span>
    <span class="something">Something</span>
    <span class="something">Something</span>
</div>
<article>
    <span class="something">Something</span>
</article>

How can I get the first matched element with a CSS selector that has different parents?

2 Answers2