ansaurus

Question

CSS Selector for selecting an element that comes BEFORE another element?

Answer 1

A:

There's no selector that will give you the previous element using CSS..

You will need to use javascript to handle what you're after.

JayTee 2009-01-29 18:30:12

Answer 2

A:

Use this selector:

label[for=username]
{
font-weight: bold
}

this will select the label that has the value 'username' in the attribute 'for'

Marwan Aouida 2009-01-29 18:35:29

Will this select the label when the text box has focus though?

Dan Herbert 2009-01-29 18:36:18

no, this will only select the element

Marwan Aouida 2009-01-29 18:39:47

I think the question was: will label become bold when input has focus?

mouviciel 2009-01-29 18:40:41

Oops! thanks mouviciel. I've removed my comment just in case.

sanchothefat 2009-01-29 18:47:22

Answer 3

+4 A:

It would be possible to use the 'adjacent sibling selector' if the input was before the label. Just put the input before the label, and then modify the layout to put label before the input. Here's an example:

<head runat="server">
    <title></title>
    <style type="text/css">
    input:focus + label {font-weight: bold}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="direction:rtl">
        <input type="text" id="username" />
        <label for="username">Username:</label>
    </div>
    <div style="direction:rtl">
        <input type="password" id="password" />
        <label for="password">Password:</label>
    </div>
    </form>
</body>

(It's kind of a hack, I would personally use javascript to do this)

Matt Brunell 2009-01-29 18:39:52

This is still good accessibility wise. They can be in any order but always always always use the 'for' and 'id' attributes.

sanchothefat 2009-01-29 18:49:46

How portable is the input:focus? which browsers don't like it?

tyndall 2009-01-29 18:50:50

input:focus does not work in IE7 (I just checked.) It works in firefox. Not sure about other browsers.

Matt Brunell 2009-01-29 19:00:55

Unfortunately, the above code does not work in Safari 3.2.1. I didn't take the time to understand what is wrong. Firefox, as already noted is just fine.

mouviciel 2009-01-29 19:19:01

Answer 4

+1 A:

Floating the input element to the right, achieves correct element order without changing order of "Username" and ":" in the label text that you get with direction:rtl.

<style type="text/css">
    form {text-align: right;}
    input:focus + label {font-weight: bold}
    input {float:right; clear:right;}
</style>
<form>
    <div>
        <input type="text" id="username" />
        <label for="username">Username:</label>
    </div>
    <div>
        <input type="password" id="password" />
        <label for="password">Password:</label>
    </div>
</form>

Ole J. Helgesen 2009-01-29 19:58:43

In my opinion, this is a better solution than changing text direction. For a better alignment, I would add: div {overflow: auto;} in the stylesheet.

mouviciel 2009-01-30 07:28:06

Answer 5

A:

Here is some detailed info about CSS selectors

Sarfraz 2010-04-01 06:13:54

ansaurus

tags:

views:

answers:

CSS Selector for selecting an element that comes BEFORE another element?

related questions