Select the preceding sibling of an element in CSS using selectors

Question

How to select the above element of an element in CSS using selectors

<li class="content">One</li>
<li class="content">Two</li>
<li class="content">Three</li>
<li class="no-content">First</li>
<li class="content">Four</li>
<li class="content">Five</li>
<li class="content">Six</li>

Here I want to use the class no-content, so that I can get its above element <li class="content">Three</li>, using CSS selector.

Unfortunately I don't think that's possible yet. Same question: http://stackoverflow.com/questions/1817792/css-previous-sibling-selector Edit: If JS is an option it's obviously quite easy: `$('li.no-content').prev().addClass('prev')` — powerbuoy, Apr 04 '12 at 06:58

score 34 · Accepted Answer · answered Apr 04 '12 at 07:00

34

This is not possible with pure CSS...

answered Apr 04 '12 at 07:00

Gatekeeper

1,586
3
21
33

2017 - this is possible, see this fiddle I made. https://jsfiddle.net/maxshuty/cj55y33p/3/ – maxshuty Jun 15 '17 at 12:23
4

@maxshuty your fiddle demonstrates the general sibling combinator, only finding siblings listed after the target! In fact, if you take out all the .top css (including the ~s you have used) the fiddle works the same! You have over complicated a wrong answer! – Mike Oct 03 '17 at 21:44
Using axe syntax, the selector `.no-content ? .content` would select `
Three

Rounin

Oct 29 '19 at 23:05

Rohit Azad Malik · Answer 2 · 2012-04-04T07:24:20.550

-1

Are you looking the same:- http://jsfiddle.net/rohitazad/4Y9D5/3/

you can select to bottom div but not select to top .

edited Apr 04 '12 at 07:24

answered Apr 04 '12 at 07:10

Rohit Azad Malik

31,410
17
69
97

Please check [http://jsfiddle.net/4Y9D5/2/](http://jsfiddle.net/4Y9D5/2/), Here I am just add a class to above element, actually it is not possible, but need like... – Justin John Apr 04 '12 at 07:24
Hi you are select to bottom div as like this http://jsfiddle.net/rohitazad/4Y9D5/3/ – Rohit Azad Malik Apr 04 '12 at 07:25
No, please check [link](http://jsfiddle.net/4Y9D5/2/) that I have already given. I need like that, but without adding the class to preceding sibling, I want to select the preceding sibling using selector **no-content**... – Justin John Apr 04 '12 at 07:32
now check to this you may define .test backgroundcolor as like this http://jsfiddle.net/rohitazad/4Y9D5/8/ – Rohit Azad Malik Apr 04 '12 at 07:37
I can't write class `test` there, its only for you to understand what I need. Is it possible to select the test class node to be selected with the class `no-content`... – Justin John Apr 04 '12 at 08:01

Select the preceding sibling of an element in CSS using selectors

2 Answers2

Linked

Related