Ways to distinguish between two labels having the same "for" attribute?

Question

Ways to distinguish between two labels having the same "for" attribute?

My HTML code is as follows:

<label class="my-class" for="_something">Text Number 1</label>
<label class="my-class" for="_something">Number 2 Text</label>

I have two labels with the same class and identical "for" attributes.

I am aware that I can target the attribute using this CSS rule:

label[for="_something"] {
   /* input */
}

But how can I distinguish between the two?

I specifically need to hide the second label using CSS.

Is it possible to target the attribute based on the text content like "Number 2 Text" in this case?

css css-selectors

Answer 1

Answer №1

Utilizing CSS, it is definitely achievable. Simply utilize the nth-of-type() selector.

Here's an example of the HTML structure:

<label class="my-class" for="_something">Text Number 1</label>
<label class="my-class" for="_something">Number 2 Text</label>
<label class="my-class" for="_something">Number 3 Text</label>
<label class="my-class" for="_something">Number 4 Text</label>

The corresponding CSS code would be:

label[for="_something"]:nth-of-type(2) {
  display: none;
}

Explore the solution further on PHPFiddle: http://jsfiddle.net/ua91bf0b/

Note that this technique relies on a CSS3 feature and may not be supported by outdated browsers.

Answer 2

Utilizing CSS, it is definitely achievable. Simply utilize the nth-of-type() selector.

Here's an example of the HTML structure:

<label class="my-class" for="_something">Text Number 1</label>
<label class="my-class" for="_something">Number 2 Text</label>
<label class="my-class" for="_something">Number 3 Text</label>
<label class="my-class" for="_something">Number 4 Text</label>

The corresponding CSS code would be:

label[for="_something"]:nth-of-type(2) {
  display: none;
}

Explore the solution further on PHPFiddle: http://jsfiddle.net/ua91bf0b/

Note that this technique relies on a CSS3 feature and may not be supported by outdated browsers.

Answer 3

Answer №2

If you wish to conceal the label depending on its content (Text with Number 2), jQuery is your best bet. It operates similarly to using CSS selectors.

$('label[for$="_something"]:contains("2")')

For instance, this snippet targets labels where the 'for' attribute's value ends with "_something" and includes the text "2".

To simplify usage, you can create a function like this:

function HideLabel(forAttribute, searchText) {
  $('label[for$="'+forAttribute+'"]:contains("'+searchText+'")').css('display','none');
}

You can then call this function as follows:

HideLabel('_something', '2');

Answer 4

If you wish to conceal the label depending on its content (Text with Number 2), jQuery is your best bet. It operates similarly to using CSS selectors.

$('label[for$="_something"]:contains("2")')

For instance, this snippet targets labels where the 'for' attribute's value ends with "_something" and includes the text "2".

To simplify usage, you can create a function like this:

function HideLabel(forAttribute, searchText) {
  $('label[for$="'+forAttribute+'"]:contains("'+searchText+'")').css('display','none');
}

You can then call this function as follows:

HideLabel('_something', '2');

Ways to distinguish between two labels having the same "for" attribute?

Answer №1

Answer №2

Similar questions

Divide an image into several sections without the need to reload the image multiple times

Position the Bootstrap button at the bottom left with absolute placement

How come the changes in my react component's CSS are not updating in real-time?

The <main> element is not inheriting the height of its parent

What could be causing my class to not be affecting a specific element in Sass?

Various designs for various arrangements in vuejs applications

Modify the parent's style in CSS based on the presence of certain specified children

Issues arising from the combination of a grid system in Bootstrap and WordPress

Animate the menu as you scroll

Hover over elements to reveal D3.js tool tips

Persist user input even after reloading the page

Error Encountered: TemplateSyntaxError on the User Profile Page

Achieving a seamless full-width background image without any distortion or cutting off

Creating nested tables by assigning unique Div IDs to each table element

Numerous links were chosen and multiple div elements were displayed on the screen

Organizing table data by columns in a continuous loop

Disable list-group-item-action clicking

Troubleshooting Autocomplete User Interface Problems

Inequality in spacing between Bootstrap columns

Function in jQuery to reference two different divs