Select the preceding sibling of an element in CSS using selectors [duplicate]

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: stackoverflow.com/questions/1817792/… Edit: If JS is an option it's obviously quite easy: $('li.no-content').prev().addClass('prev') — powerbuoy
– powerbuoy, Commented Apr 4, 2012 at 6:58
Rather than “above”, the term for the <li> before <li class="no-content"> is “preceding sibling”. — Paul D. Waite
– Paul D. Waite, Commented Apr 4, 2012 at 7:20

Gatekeeper · Accepted Answer · 2012-04-04 07:00:01Z

34

This is not possible with pure CSS...

answered Apr 4, 2012 at 7:00

Gatekeeper

1,6163 gold badges22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

maxshuty Over a year ago

2017 - this is possible, see this fiddle I made. jsfiddle.net/maxshuty/cj55y33p/3

Mike Over a year ago

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

Rounin Over a year ago

Using axe syntax, the selector .no-content ? .content would select <li class="content">Three</li> in the example above. See: github.com/RouninMedia/axe

Rohit Azad Malik · Accepted Answer · 2012-04-04 07:24:20Z

-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 4, 2012 at 7:24

answered Apr 4, 2012 at 7:10

Rohit Azad Malik

32.3k17 gold badges72 silver badges100 bronze badges

5 Comments

Justin John Over a year ago

Please check http://jsfiddle.net/4Y9D5/2/, Here I am just add a class to above element, actually it is not possible, but need like...

Rohit Azad Malik Over a year ago

Hi you are select to bottom div as like this jsfiddle.net/rohitazad/4Y9D5/3

Justin John Over a year ago

No, please check link 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...

Rohit Azad Malik Over a year ago

now check to this you may define .test backgroundcolor as like this jsfiddle.net/rohitazad/4Y9D5/8

Justin John Over a year ago

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

Collectives™ on Stack Overflow

Select the preceding sibling of an element in CSS using selectors [duplicate]

2 Answers 2

3 Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Linked

Related