Select element based on the child of its previous sibling

Question

I have this code:

<cite>
 <a id="john" href="javascript: void(0)">John</a>
 <span>time</span>
 <a>DELETE</a>
</cite>
<blockquote>hello there</blockquote>

This is my CSS:

cite #john + blockquote {color:black;}

I am aware this won't work but I need something to select only the blockquote elements right after a cite that contains an anchor with the ID john.

I cannot change the HTML only the CSS. Any ideas please?

If this is impossible with CSS then a JavaScript solution would be welcome too.

You can't select it with css selectors. You need to use JavaScript for this. — Mohammad Usman, Sep 26 '16 at 15:58
Possible duplicate of [CSS how to select first occuring element after another element](http://stackoverflow.com/questions/4623328/css-how-to-select-first-occuring-element-after-another-element) — Xavier, Sep 26 '16 at 16:01
If impossible with CSS then a javascript solution would be welcome too. — Cain Nuke, Sep 26 '16 at 16:02
CSS doesn't work this way. There is no [parent selector](http://stackoverflow.com/q/1014861/3597276) or [previous sibling selector](http://stackoverflow.com/q/1817792/3597276). You'll need JS. (Too bad you didn't also ask for an [`nth-of-class`](http://stackoverflow.com/q/5545649/3597276) selector. That would have been pretty cool :-) — Michael Benjamin, Sep 26 '16 at 16:02
CSS only works in the forwards direction, which is why there is no previous sibling selector. You'll need to use javascript if you can't modify the html directly. — Sean, Sep 26 '16 at 16:14

Mohammad Usman · Answer 1 · 2016-09-27T13:02:48.270

3

You can use following jQuery selector to select the desired element.

$('cite').has('a#john').next('blockquote')

$('cite').has('a#john').next('blockquote').addClass('active');

.active {
  background: green;
}

blockquote {
  margin-right: 0;
  margin-left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<cite>
  <a id="john" href="javascript: void(0)">John</a>
  <span>time</span>
  <a>DELETE</a>
</cite>
<blockquote>hello there</blockquote>
<cite>
  <a href="javascript: void(0)">John</a>
  <span>time</span>
  <a>DELETE</a>
</cite>
<blockquote>hello there</blockquote>
<cite>
  <a id="john" href="javascript: void(0)">John</a>
  <span>time</span>
  <a>DELETE</a>
</cite>
<blockquote>hello there</blockquote>

Solution Without jQuery:

var activeClass = 'active';
var cites = document.querySelectorAll('cite');

[].forEach.call(cites, function(elem) {
 if(elem.querySelector('a#john')) {
        var blockQuote = elem.nextElementSibling;
        blockQuote.className = blockQuote.className + activeClass;
    }
});

.active {
  background: green;
}

blockquote {
  margin-right: 0;
  margin-left: 0;
}

<cite>
  <a id="john" href="javascript: void(0)">John</a>
  <span>time</span>
  <a>DELETE</a>
</cite>
<blockquote>hello there</blockquote>
<cite>
  <a href="javascript: void(0)">John</a>
  <span>time</span>
  <a>DELETE</a>
</cite>
<blockquote>hello there</blockquote>
<cite>
  <a id="john" href="javascript: void(0)">John</a>
  <span>time</span>
  <a>DELETE</a>
</cite>
<blockquote>hello there</blockquote>

edited Sep 27 '16 at 13:02

answered Sep 26 '16 at 16:06

Mohammad Usman

30,882
16
80
78

is it possible with no jquery? Seems like I cant use it here. – Cain Nuke Sep 27 '16 at 12:17
Sorry, now im getting this: cites.forEach is not a function", – Cain Nuke Sep 27 '16 at 12:42
@CainNuke in which browser you are checking? – Mohammad Usman Sep 27 '16 at 12:55
Im on firefox. The jquery code displays fine but not the second one. – Cain Nuke Sep 27 '16 at 13:02
@CainNuke I've updated once again, plz check, It should work. – Mohammad Usman Sep 27 '16 at 13:09
Now I can see ti here but I cant reproduce it on my end. Wehre do I put the javascript code? Inside head? Or inside body? – Cain Nuke Sep 27 '16 at 13:25
@CainNuke better place it inside body near its end. – Mohammad Usman Sep 27 '16 at 13:31
Thanks. I will give it a try like that. – Cain Nuke Sep 27 '16 at 13:36
@CainNuke Check this [Fiddle](https://jsfiddle.net/rzvvgyhp/). Its working in my Firefox 45.4.0. – Mohammad Usman Sep 27 '16 at 13:39
Yes, its working with me too. Actually the problem is that I cant get it to work on a Firefox addon that places code on a page. Seems like its a problem with the addon. – Cain Nuke Sep 28 '16 at 15:27

Select element based on the child of its previous sibling

1 Answers1

Linked