disable css style from first child item in nav bar

Question

I have a site qavalidation.com with a sticky menubar, in which I want to disable the css style for the first child element ("Home") only, it should just work as a normal link, no hover color should change, please help!

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

2

As for as I understood from your question you need to disable all hover effects for the first child of list elements. For that you can use the following style.

a:first-child:hover {
    all:unset!important;
}

But support is limited (https://developer.mozilla.org/en-US/docs/Web/CSS/all)

Or you can simply override all the effects on hover by using !important. For example,

a:first-child:hover{
color: #757575 !important;
background-color: transparent !important;
}

Reference

edited May 23 '17 at 12:31

Community

1
1

answered Jun 02 '15 at 07:33

sasi

512
4
27

Using `!important` is as almost always not advisable and also will not be necessary as long as you put the right selector. Using `:first-child` on that selector will raise the specificity enough to make sure the new rule gets applied. – connexo Jun 02 '15 at 08:21
@connexo Yeah! Agreed – sasi Jun 02 '15 at 08:54

score 0 · Answer 2 · edited Feb 12 '16 at 11:21

0

Use :first-child pseudo class:

ul li:first-child {
   /*your styles here*/
}

edited Feb 12 '16 at 11:21

John Slegers

45,213
22
199
169

answered Jun 02 '15 at 07:32

Morpheus

8,829
13
51
77

score 0 · Answer 3 · answered Jun 02 '15 at 07:46

You may want to use the :hover and :focus selectors to control which color the home link displays on hover or focus. a:hover { color: whatever color you want; } http://www.w3schools.com/cssref/sel_hover.asp
http://www.w3schools.com/cssref/sel_focus.asp

disable css style from first child item in nav bar

3 Answers3