CSS Selector for selecting an element that comes BEFORE another element? [duplicate]

后端未结

关注

 5  1279

遇见更好的自我

相关标签:

5条回答

-上瘾入骨i

2020-12-05 01:56
The CSS Selectors 4 Spec provides a syntax for defining the "subject" of a selector by using a !. As of early-2016, this is not available in any browser. I'm including this because it will be the correct way to do this using pure CSS once browsers implement this syntax.

Given the markup in the question
```
<label for="username">Username:</label>
<input type="textbox" id="username" />

<label for="password">Password:</label>
<input type="textbox" id="password" />
```
This CSS would do the trick.
```
label:has(+ input:focus) {font-weight: bold}
```
Of course, this assumes browsers actually implement the subject selector and that there are no bugs related to how this syntax works with the :focus pseudo-class.
0 讨论(0)
发布评论:

提交评论
- 加载中...
清歌不尽

2020-12-05 02:00

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...

忘了有多久

2020-12-05 02:03

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>

0 讨论(0)

无人及你

2020-12-05 02:18
Use this selector:
```
label[for=username]
{
font-weight: bold
}
```
this will select the label that has the value 'username' in the attribute 'for'
0 讨论(0)
发布评论:

提交评论
- 加载中...

北恋

2020-12-05 02:19

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)

input:focus + label {font-weight: bold}

<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>

0 讨论(0)

热议问题