CSS -: target ~

Question

Here is my html code:

<a href="#anchor">test</a> <ul id="anchor"></ul> 

Now I want to create my goal, which is not a problem.

 #anchor:target { } 

But I want to choose the sibling of the target (s).

 #anchor:target ~ a{ background: blue; } 

This does not work. How to choose a sibling target?

Answer 1

There is currently no styling style for previous siblings using CSS. You will need to use javascript for this.

You can get the next brother with + or the whole <a> after <ul> with ~ :

 #anchor:target + a { /* <ul></ul> <a>will get this one</a> <a>but not this one</a> */ } #anchor:target ~ a { /* <ul></ul> <a>will get this one</a> <a>and this one too!</a> */ } 

Answer 2

There is no "previous" selector in CSS (in CSS2 or CSS3).

In the draft "Level 4 Selectors" the selector is presented ! , which, if I understand him correctly, allows you to select the previous choice. https://drafts.csswg.org/selectors-4/#subject

However, this is still in draft format and far from being supported in all major browsers.

Sorry, but this is not possible with the current CSS specification.
The only way to achieve this is to use JavaScript or reorder the markup.

Answer 3

You cannot currently get previous siblings. But you can select an element with a specific attribute like this:

 a[href="#anchor"] { color: #f00; } 

 <a href="#anchor">test</a> <ul id="anchor"></ul> 

Answer 4

as per my previous answer, this is not possible in the way you wrote due to limitations in CSS.

However, you can always combine yourself?

 a[target|="#"] { } 

This will select all the <a> tags in your document that point to local bindings.