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

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

Answer 2

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');

Answer 3

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

Answer 4

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 5

Despite other answers here, you should not use display:none to hide the label element.

The accessible way to hide a label visually is to use an 'off-left' or 'clip' rule in your CSS. Using display:none will prevent people who use screen-readers from having access to the content of the label element. Using display:none hides content from all users, and that includes screen-reader users (who benefit most from label elements).

label[for="foo"] { 
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

The W3C and WAI offer more guidance on this topic, including CSS for the 'clip' technique.

Answer 6

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

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