How to hide element label by element id in CSS?

Question

Let's say I've got this code

<table> <tr> <td><input id="foo" type="text"></td> <td><label for="foo">This is foo</label></td> </tr> </table>

This will hide the input:

#foo { display: none;}  /* or hidden could work too, i guesss */

How do I hide the label?

Answer 1

If you give the label an ID, like this:

<label for="foo" id="foo_label">

Then this would work:

#foo_label { display: none;}

Your other options aren't really cross-browser friendly, unless javascript is an option. The CSS3 selector, not as widely supported looks like this:

[for="foo"] { display: none;}

Answer 2

You should give your <tr> tag an id foo_row or whatever. And hide that instead

Answer 3

You probably have to add a class/id to and then make another CSS declaration that hides it as well.

Answer 4

You have to give a separate id to the label too.

<label for="foo" id="foo_label">text</label>

#foo_label {display: none;}

Or hide the whole row

<tr id="foo_row">/***/</tr>

#foo_row {display: none;}

Answer 5

If you don't care about IE6 users, use the equality attribute selector.

label[for="foo"] { display:none; }

Answer 6

Without a class or an id, and with your specific html:

table tr td label {display:none}

Otherwise if you have jQuery

$('label[for="foo"]').css('display', 'none');