CSS selector: How to select element sibling AND element itself?

Question

So I have a set of links, and want to apply a style [let's say color: red;] to those links only if they are siblings in the DOM. For example, if I have three links:

<a class="nav-link-primary">link</a>
<a class="nav-link-secondary">link</a>
<a class="nav-link-tertiary">link</a>

They should all be red.

But if I have something like this:

<a class="nav-link-primary">link</a>
<span>Lorem</span>
<a class="nav-link-secondary">link</a>
<a class="nav-link-tertiary">link</a>

Then only the last two links should be red, as they are siblings. Is it possible to do this with CSS?

Here is what I've tried

.nav-link-primary ~ .nav-link-primary,
.nav-link-primary ~ .nav-link-secondary,
.nav-link-primary ~ .nav-link-tertiary,
.nav-link-secondary ~ .nav-link-primary,
.nav-link-secondary ~ .nav-link-secondary,
.nav-link-secondary ~ .nav-link-tertiary,
.nav-link-tertiary ~ .nav-link-primary,
.nav-link-tertiary ~ .nav-link-secondary,
.nav-link-tertiary ~ .nav-link-tertiary {
  color: red;
}

.nav-link-primary:first-child + .nav-link-secondary{
  color: red;
}

.nav-link-secondary:first-child + .nav-link-primary{
  color: red;
}

<a class="nav-link-primary">link</a>
<a class="nav-link-secondary">link</a>
<a class="nav-link-tertiary">link</a>

Here is my CodePen link: http://codepen.io/obliviga/pen/jryPgO

This does not make the first link red, even though it has a sibling defined in the first block of selectors. Any ideas?

the sibling selector `~` selects siblings from top to bottom of the HTML structure . not the other way. CSS = Cascading Style Sheets so it only has selectors from top to bottom. — Mihai T, Sep 22 '16 at 06:55

score 4 · Accepted Answer · edited May 23 '17 at 10:30

The first link isn't red because there's no preceding element to refer to, and there isn't a CSS selector that can do this. See Is there a "previous sibling" CSS selector?. A better idea would be to have a common parent element to refer to, such as .adjacent-links, like so:

.adjacent-links a { color: red; }

<a class="nav-link-primary">link</a>
<span>Lorem</span>
<span class="adjacent-links">
    <a class="nav-link-secondary">link</a>
    <a class="nav-link-tertiary">link</a>
</span>

EDIT 10/11/2016:

If you have a lot of these links to manage, or they're automatically generated, you can also use a bit of jQuery. Find the nav-links, check whether the next element is a nav-link, and if so, add the styling. You will need to have a common class for all the nav-links (in this case .nav-link) for this to run efficiently.

$('.nav-link').filter(function(e) {
    return e.nextElementSibling.classList.contains('nav-link');
}).css({
    color: 'red'
});

score 1 · Answer 2 · edited May 23 '17 at 12:18

Regarding sibling selectors—there are Adjacent and General sibling selectors.

EDIT: Since the topic is on sibling selectors with different use cases, I have refined the post to give more useful input and a bit for more clarification.

In your case, rather than using a sibling selector, it is more straight-forward to use other combinator selectors like descendant selector or child selector (as we are selecting components inside a parent).

For the example mentioned above, it would be difficult to accomplish the results just by using sibling selectors alone. If we have to go about only using sibling selector, then, we would end up being not using the sibling selector in the right way or would need a hack (not the right way to go) which results in unreadable code (based on how dynamic the above markup is generated).

Linking the recommendation for further reference.

Short answer: I would not apply sibling selector on the markup in your case, but would go with Child combinator selector or Descendant selector.

Sample snippet to further clarify what is said above (hope the code is self-explanatory).

.nav-link-group > a {
  color: red;
}

<!-- apply a style `color: red` to those links only if they are siblings in the DOM -->
<div>Example 1 revised:</div>
<div class="nav-link-group">
  <a class="nav-link-primary">link</a>
  <a class="nav-link-secondary">link</a>
  <a class="nav-link-tertiary">link</a>
</div>

<hr>

<!-- only the last two links should be red, as they are siblings. -->
<div>Example 2 revised :</div>
<div>
  <a class="nav-link-primary">link</a>
  <span>Lorem</span>
  <span class="nav-link-group">
    <a class="nav-link-secondary">link</a>
    <a class="nav-link-tertiary">link</a>
  </span>
</div>

Found a negative test case which should be positive: second `` in `Lorem link link` — RamenChef, Sep 22 '16 at 01:25

score 0 · Answer 3 · edited Sep 22 '16 at 06:19

0

.nav-link-primary ~ a,.nav-link-primary { color: red; }

Use above css.

Hoping this will help you :)

edited Sep 22 '16 at 06:19

Vikash Pandey

5,407
6
41
42

answered Sep 22 '16 at 06:05

priya_singh

2,478
1
14
32

This fails the OP's second test case. The first link shouldn't be red if it's alone. – RamenChef Sep 22 '16 at 15:20

CSS selector: How to select element sibling AND element itself?

3 Answers3