CODEWITHSUNDEEP
css
SatAj
SatAj

Reputation: 1979

Prevent hover effect to first element through css

I am trying to prevent the hover and focus effect only on first row, but when I am applying "first-child" pseudo code it applies to all the rows.. Here's the code:

/* CSS */
ul {list-style-type: none;}
ul > li > a {
    background: transparent;
    font: normal 12px Arial, sans-serif;
    color: #007DBD;
    margin: 0;
    border-radius: 0;
    padding: 7px 10px;
    width:200px;
}

ul > li > a:first-child {
    color:#333;
    background: none;
}

ul > li > a:hover, ul > li > a:focus {
    color: #009BE1;
    background: #F3F3F3;
    text-decoration: none;
}

/* HTML */
<ul>
        <li><a href="javascript:;">[email protected]</a></li>
        <li><a href="javascript:;">Edit Profile</a></li>
        <li><a href="javascript:;">Logout</a></li>
</ul>

I don't want any hover effect for first <li><a> item.
Here's the js-fiddler:
http://jsfiddle.net/123qyrtc/

Please let me know if there is any CSS solution...

Upvotes: 3

Views: 3017

Answers (3)

Aqib1604
Aqib1604

Reputation: 302

ul > li:first-child > a:hover, ul > li:first-child > a:focus {
    color:#333;
    background: none;
    text-decoration:underline
}

Upvotes: 4

Brent
Brent

Reputation: 1926

To clarify, you don't want the first part ([email protected]) to have a hover effect, correct? You need to target the first li then, like so:

ul > li:first-child > a:hover {
    color:#333;
    background: none;
}

Upvotes: 3

LcSalazar
LcSalazar

Reputation: 16821

Use the :not() pseudo to exclude what you don't want:

Updated JsFiddle

ul > li:not(:first-child) > a:hover, ul > li > a:focus {
    color: #009BE1;
    background: #F3F3F3;
    text-decoration: none;
}

Just remember that the :first-child in this case is the <li>, not the a. The a is always first.

Upvotes: 3

Related Questions