Select the initial element from a group of elements with a specific attribute using CSS

Question

Select the initial element from a group of elements with a specific attribute using CSS

Imagine we are faced with the following code snippet:

<node>
  <element bla="1"/>
  <element bla="2"/>
  <element bla="3"/>
  <element bla="3"/>
  <element bla="3"/>
  <element bla="4"/>
</node>

How can we select the first child element that has an attribute equal to 3? Initially, I tried using this selector:

element[bla="3"]:first-child

...however, this approach did not yield the desired result.

css css-selectors

Answer 1

Answer №1

The :first-child pseudo-class will only target the very first child node. If that first child does not match the criteria of being an element[bla="3"], then nothing will be selected.

There is no equivalent filter pseudo-class specifically for attributes. One workaround is to select all elements and then exclude those that come after the first one (as explained in more detail here and here):

element[bla="3"] {
}

element[bla="3"] ~ element[bla="3"] {
    /* Revert the rule above */
}

This method works well for applying styles, but if you need to identify that specific element for reasons other than styling (especially if your markup is arbitrary XML rather than HTML), you may have to resort to using functions like document.querySelector():

var firstChildWithAttr = document.querySelector('element[bla="3"]');

Alternatively, you can use an XPath expression:

//element[@bla='3'][1]

Answer 2

The :first-child pseudo-class will only target the very first child node. If that first child does not match the criteria of being an element[bla="3"], then nothing will be selected.

There is no equivalent filter pseudo-class specifically for attributes. One workaround is to select all elements and then exclude those that come after the first one (as explained in more detail here and here):

element[bla="3"] {
}

element[bla="3"] ~ element[bla="3"] {
    /* Revert the rule above */
}

This method works well for applying styles, but if you need to identify that specific element for reasons other than styling (especially if your markup is arbitrary XML rather than HTML), you may have to resort to using functions like document.querySelector():

var firstChildWithAttr = document.querySelector('element[bla="3"]');

Alternatively, you can use an XPath expression:

//element[@bla='3'][1]

Answer 3

Answer №2

:not([abc="5"]) + [abc="5"] {
  background-color: blue;
}

<div>
  <p abc="1">Element 1</p>
  <p abc="2">Element 2</p>
  <p abc="3">Element 3</p>
  <p abc="3">Element 3</p>
  <p abc="3">Element 3</p>
  <p abc="4">Element 4</p>
</div>

Answer 4

:not([abc="5"]) + [abc="5"] {
  background-color: blue;
}

<div>
  <p abc="1">Element 1</p>
  <p abc="2">Element 2</p>
  <p abc="3">Element 3</p>
  <p abc="3">Element 3</p>
  <p abc="3">Element 3</p>
  <p abc="4">Element 4</p>
</div>

Select the initial element from a group of elements with a specific attribute using CSS

Answer №1

Answer №2

Similar questions

Setting up the nth-of-type() function to dynamically target elements in sequence

Switching out an element within a constrained array causes a momentary disappearance of the item

Increasing the size of a card beyond the container using the CSS PRE tag

Utilizing JQuery click function to dynamically modify CSS styles

Cutting diagonally through a text along the trajectory of an SVG line

Displaying videos in full screen using HTML5

The buttons in the Bootstrap modal are unresponsive

Ways to display an icon in Angular 10 only when it is hovered over

creating a multi-page form using HTML and JavaScript

Tips on personalizing chosen date formats within the Mantine DatePicker?

No matter how tall I make it, the scroll bar just won't stop showing

css avoiding code duplication with nested classes

Centering content vertically in CSS

One cannot focus on HTML if it's disabled

Rendering High-quality Images in Internet Explorer Browser

Manipulate the css pseudo-element :after using jQuery's .siblings() method

Tips on adjusting the size of a Materialize CSS datepicker to perfectly fit within a card

What could be the reason for Firefox failing to display the border of a table when the tbody is

How can I retrieve the inner html content of an element in HandsomeSoup?

Looking for consistent vertical and horizontal scrolling behavior in a React project