Select previous and next sibling of an active element

Question

I want to select one element before and one element after the given class with CSS only. I'm wondering if that's possible ... Here is my list:

<ul>
    <li>one</li>
    <li>two</li>
    <li class='active'>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
</ul>

I want to apply some styles to one element before and one after .active. I can do it with javascript - no problem, but I was wondering if something like this could be possible:

/* before .active */
ul li.active-element(.active - 1) {
  background:red;
}
/* after .active */
ul li.active-element(.active + 1) {
  background:blue;
}

what exactly you need to add there? we can achieve it with `:after` and `:before`. — Richa, Oct 13 '16 at 07:05
Would like to add this can be achived via jquery before and after using the find. — Shahil M, Oct 13 '16 at 07:23
Yeah with js it's simple - I was just wondering if it's possible with CSS only... — bukowski, Oct 13 '16 at 07:24

score 1 · Accepted Answer · answered Oct 13 '16 at 07:06

1

You Can't select previous sibling. But yes you can select next sibling by

ul li.active+ li{
  background:blue;
}

Js fiddle Link

You can select previous sibling by Javascript.

answered Oct 13 '16 at 07:06

priya_singh

2,478
1
14
32

1

Thanks for the tip to select next sibling!! – bukowski Oct 13 '16 at 07:40

Mohammad Usman · Answer 2 · 2016-10-13T11:37:10.497

With Pure CSS you cannot select previous sibling with css.

But you can select next sibling with next sibling + selector i.e

li.active + li {
    background: blue;
}

However in some cases you can make previous sibling to look like selected (But it has its limitations).

While for previous sibling if you just wants to apply background-color on previous item, you can make previous items looks like selected with pseudo class i.e :before or :after of active element.

.list {
  list-style: none;
  overflow: hidden;
  padding: 0;
  margin: 0;
}
.list li {
  position: relative;
  padding: 3px 10px;
}
.list li.active {
  background: green;
}
.list li.active:before {
  position: absolute;
  background:red;
  height: 100%;
  bottom: 100%;
  content: '';
  z-index: -1;
  right: 0;
  left: 0;
}
.list li.active + li {
  background:blue;
}

<ul class="list">
  <li>one</li>
  <li>two</li>
  <li class='active'>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
</ul>

With JavaScript (jQuery Framework) you can select previous select previous sibling.

You can use jQuery's .prev() method to select previous sibling i.e.

$('.list li.active').prev().addClass('prev');

$(function() {
  $('.list li.active').prev().addClass('prev');
});

.list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.list li {
  padding: 3px 10px;
}
.prev {
  background: red;
}

.active {
  background: green;
}
.active + li {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="list">
  <li>one</li>
  <li>two</li>
  <li class='active'>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
</ul>

This will not work in my case as I need to select other elements inside
@fjckls I've suggested this because in your question requirement was only to change `background-color` of previous sibling. And yes, it has its limitations. You can apply styles to parent only and not on child elements. — Mohammad Usman, Oct 13 '16 at 07:16

score 0 · Answer 3 · answered Oct 13 '16 at 07:08

0

Using CSS you can select an element that is placed immediately after div.active. In your case the code will look like this:

li.active + li {...}

but it is impossible to select one before. For further information visit this link

answered Oct 13 '16 at 07:08

Olha Vadiasova

418
6
16

Why would they make an option to select next sibling but not the previous - what's the reason behind that - makes no sense – bukowski Oct 13 '16 at 07:20
1

The same reason that you can't select a parent element only children. CSS was designed to be read top to bottom left to right so to speak. It supposedly would be difficult to read. If you can elaborate on what you aretrying to achieve there may be an alternative method. – R Reveley Oct 13 '16 at 07:22
By the way, I've come across this [question](http://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-css-selector). Maybe it would be helpful for you – Olha Vadiasova Oct 13 '16 at 07:52

score -1 · Answer 4 · answered Oct 13 '16 at 07:38

-1

As others have stated, no, you can't select previous sibling. There are some combinations with SASS/SCSS and LESS, but this is not really good in practice.

However, we can expect :past in CSS4, but it will take some time to get the browser support for this.

answered Oct 13 '16 at 07:38

stormec56

162
2
16

Downvoater, care to explain? – stormec56 Oct 13 '16 at 10:30

Select previous and next sibling of an active element

4 Answers4