Adding not selector to style breaks styling

Question

I'm trying to apply a certain hover style to all element except the first. For some odd reason :first-child works, but adding :not(first-child) doesn't. Why? Full JSFiddle here.

EDIT:
Apparently a small addition of code breaks this style, something I didn't add to the original fiddle because I didn't think It would matter, now I realise it does. Please note that the style does not work when additional tags are located between the a tags, like so:

<div id="mySidenav" class="sidenav">
  <div id="logoContainer">
    <a href="https://www.google.com/">
      <img src="assets/img/logo_white.png" alt="logo">
    </a>
  </div>
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

Working CSS:

.sidenav a:first-child:hover{
    color: red;
}

Not working at all CSS:

.sidenav a:not:(first-child):hover{
    color: red;
}

its `:not(:first-child)` instead of `:not:(first-child)` (notice the location of the second double colon) — giorgio, Jan 11 '17 at 16:25
@BoltClock Used a different cv reason before I read the comments about fixing the typo not working. — TylerH, Jan 11 '17 at 16:32
In my original code there are several more tags before the `a` tags, that breaks the styling. Please take a look and reopen the question. — Alex, Jan 11 '17 at 16:43
@undroid do you want the x to be red on hover as well? e.g. you only want the logo to not change on hover? — TylerH, Jan 11 '17 at 16:53
@undroid OK, that's where the confusion is. That's not actually your first `a` element. One minute. — TylerH, Jan 11 '17 at 16:55
@undroid You can also use sibling selector see my answer below, let me know if that works. — Stickers, Jan 15 '17 at 18:42

TylerH · Accepted Answer · 2017-01-11T17:01:16.833

3

This utilizes a combination of the :not pseudo-selector and the direct descendant selector to apply styles only to <a> elements that are immediate, or direct, descendants of .sidenav.

Since your first <a> element is a grand-child, and not a direct child, of .sidenav, it doesn't get the color: red styling thanks to >, and since your close 'x' has a class of closebtn, we can use :not(.closebtn) to eliminate that one from getting red styling, as well:

.sidenav > a:not(.closebtn):hover{
    color: red;
}

<div id="mySidenav" class="sidenav">
    <div id="logoContainer">
        <a href="https://www.google.com/">
            <img src="assets/img/logo_white.png" alt="logo">
        </a>
    </div>
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
</div>

edited Jan 11 '17 at 17:01

answered Jan 11 '17 at 16:48

TylerH

20,799
66
75
101

I updated my fiddle and it still not working right: please take a look here: https://jsfiddle.net/cnnwepvz/ – Alex Jan 11 '17 at 16:53
@undroid Updated my answer to not color the 'x' **or** the logo on hover. – TylerH Jan 11 '17 at 16:58
This - `.sidenav > a:not(.closebtn):hover` should also work and if the markup remains same then it would be more simpler :) (*Not saying that your answer is incorrect*) – Harry Jan 11 '17 at 16:58
@TylerH: Nope, it shouldn't because it is not a child of `.sidenav`. – Harry Jan 11 '17 at 17:00
1

@Harry Oh, I see I was missing the `>` in your suggestion. Thanks – TylerH Jan 11 '17 at 17:00
Perfect. Could you please explain what I was missing? edit- just saw you added an explanation. many thanks. – Alex Jan 11 '17 at 17:01
1

@undroid I think it was confusing you because, while your x was the first element that appears on the page, it wasn't the first element in your HTML code, so you were actually targeting the logo rather than `` – TylerH Jan 11 '17 at 17:03
Silly me. I finally get it. Thanks for that extra explanation. – Alex Jan 11 '17 at 17:04
The fiddle in my answer does the same thing, or am I missing something? – sol Jan 11 '17 at 17:11
@ovokuro See the update to the question. OP has more code before the first `` – TylerH Jan 11 '17 at 17:12
Ah ok, just saw that. – sol Jan 11 '17 at 17:12

score 2 · Answer 2 · edited Jan 11 '17 at 17:13

2

Your syntax looks slightly wrong. Try:

.sidenav a:not(:first-child):hover{
    color: red;
}

Updated JSFiddle

edited Jan 11 '17 at 17:13

TylerH

20,799
66
75
101

answered Jan 11 '17 at 16:25

sol

22,311
6
42
59

Just missed out. Thought I would be the first here – Richard Hamilton Jan 11 '17 at 16:26
it was close :) – sol Jan 11 '17 at 16:27

score 1 · Answer 3 · answered Jan 11 '17 at 18:59

You can use a combination of direct children > and next sibling + selectors.

.sidenav > a + a:hover {
  color: red;
}

<div id="mySidenav" class="sidenav">
  <div id="logoContainer">
    <a href="https://www.google.com/">
      <img src="assets/img/logo_white.png" alt="logo">
    </a>
  </div>
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

score 0 · Answer 4 · answered Jan 11 '17 at 16:28

0

you can try

.sidenav a:not(:first-child):hover{
    color: red;
}

answered Jan 11 '17 at 16:28

mickaelw

1,453
2
11
28

Adding not selector to style breaks styling

4 Answers4