How to differentiate between two labels with an identical "for" attribute? - css

Question

I have the following HTML:
<label class="my-class" for="_something">Text Number 1</label>
<label class="my-class" for="_something">Number 2 Text</label>
Basically I have 2 labels with identical class and also identical for= attributes
I know that I can target the attribute by:
label[for="_something"] {
/* input */
}
But how can I differentiate the 2 of them?
Basically I need to use the CSS to hide the second label.
Can I target the attribute by the "name text"? "Number 2 Text" in this example?

Answer 1

It IS indeed possible with CSS. Just use nth-of-type().
HTML:
<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>
CSS:
label[for="_something"]:nth-of-type(2) {
display: none;
}
PHPFiddle Link: http://jsfiddle.net/ua91bf0b/
Please note: This is a CSS3 feature, and will not work with some of the old browsers.

Answer 2

If you want to hide the label based on it's text (Number 2 Text) then you need to use jQuery. It's "almost" the same since you use css selectors too in jQuery.
$('label[for$="_something"]:contains("2")')
this one for example takes the labels where the for tag ends with "_something" (so it's good with 123_something and asd_something too) adn the label text contains "2".
You can make a function for this for easier use:
function HideLabel(forattr, texttosearch) {
$('label[for$="'+forattr+'"]:contains("'+texttosearch+'")').css('display','none');
}
And use it like:
HideLabel('_something', '2');