CSS first child hover with a element

Question

I'm trying to get the first a:hover in a div to have a different right-margin, but none of the solutions I've found on this forum seem to be recognized by the browser (I'm using Chrome Version 45.0.2454.93 m).

The html:

 <div id="example">
     <a href="something1.html">Link 1</a>
     <a href="something2.html">Link 2</a>
     <a href="something3.html">Link 3</a>
 </div>

The CSS:

a:hover {
    margin: 0px -1px;
}

#example:first-child:hover {
    margin-left: 0px;
}

This is being completely ignored, and just using the a:hover margin on hover.

Full source code below:

HTML:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>removed</title>
        <link href="css/main.css" rel="stylesheet" type="text/css">
    </head>

    <body>
        <div id="container">
            <div id="heading">
                <h2>HOME</h2>
                <hr>
                <h3>removed</h3>
            </div>

            <img src="images/css_dev_smaller.png" alt="" width="5472" height="3648" id="image_main" />
        </div>
        <div id="nagivation">
            <a href="index.html">Home</a> | <a href="removed.html">removed</a> | <a href="removed.html">removed</a>
        </div>
    </body>  
</html>

CSS:

@charset "utf-8";
html,body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    height: 100%;
    width: 100%;
    background: #fff;
}

h2,h3 {
    font-family: Segoe, "Segoe UI", Verdana, "DejaVu Sans", "Trebuchet MS", sans-serif;
    font-weight: 100;
    padding: 0px;
}

h2 {
    margin-bottom: -14px;
    margin-top: 40px;

}

h3 {    
    margin-top: -5px;
    margin-bottom: 55px;
}

hr {
    width: 100%;
    border-color: #bdbbc2;
    border-width: 1px 0px 0px 0px;
    height: 1px;
}

#container {
    display: inline-block;
    text-align: center;
    display: block;
    margin: 0 auto;
    min-width: 51%;     
    padding-top: 10%;
}

#heading {
    display: inline-block;
    width: 15%; 
    min-width: 200px;
    padding-right: 10px;
    vertical-align: top;
    text-align: left;
}

#image_main {
    display: inline-block;      
    width: 35%;
    min-width: 250px;
    height: auto;
    margin: 0px auto;   
    padding: 0px;
}

#nagivation {
    margin: 50px auto;
    text-align: center;
}

a:link, a:visited {
    font-family: Segoe, "Segoe UI", Verdana, "DejaVu Sans", "Trebuchet MS", sans-serif;
    text-decoration: none;
    color: #000000;
}

a:hover {
    font-weight: 600;
    margin: 0px -1px;
}

#navigation a:first-child:hover {
    margin: 0px -1px 0px 0px;
    color: #B72C2F;  /* TESTING */
    font-size: 20px; /* TESTING */
}

From your comment to rblarsen you said "On the hover on the first , I don't want it to scooch over to the left so that the whole set of links don't move when I hover over the first link" -- does that mean you DO want the set of links to scooch over to the left when you hover the second and third link etc? — xec, Sep 29 '15 at 14:10
@xec No. Basically, when I hover the font-weight is increased. So, by setting the margins on each side to -1px it keeps the adjacent links from moving a bit on hover. But, on the first link if I hover, it will still move everything else over -1px to the left. So, I want the first to have a modified left-margin on hover, different from the others. — Beaker, Sep 29 '15 at 14:15

razemauze · Accepted Answer · 2015-09-29T14:16:42.063

11

It should be:

#example a:first-child:hover {
    margin-right: 0px;
}

The way you have written it, it selects the first instance of #example (if it is a first child) and adds the CSS to that.

EDIT: As you can see in this JSFiddle, it works - I have added the color:red; to show it more.

The rest of the links "move", because both of the sides of the links get -1px margin on hover, and can be fixed like this:

a:hover {
    margin: 0 0 0 -1px;
}

edited Sep 29 '15 at 14:16

answered Sep 29 '15 at 13:49

razemauze

2,666
1
16
28

2

It doesn't "take the first instance of `#example`", but rather "selects `#example` if it *is* a `:first-child`" - small distinction but an important one ;) – xec Sep 29 '15 at 14:00
If it _is_ a first child? If there is only one instance of #example, it will always be the first, so the CSS will apply to that. – razemauze Sep 29 '15 at 14:04
Sorry, made a typo above. The left-margin on the first-child should be 0px. ie. On the hover on the first , I don't want it to scooch over to the left so that the whole set of links don't move when I hover over the first link. I tried the above and added a color: red; to make sure I can see if it's taking it, and it's still being completely ignored. I also tried #example>a:first-child:hover to try and force it and nothing. – Beaker Sep 29 '15 at 14:07
@rblarsen That's exactly what I mean - #example is not necessarily a first-child even though it is the only element with that ID on a page, see http://jsfiddle.net/wwLjp6y7/ – xec Sep 29 '15 at 14:07
@xec ah, I see - I tested it before my comment, and it worked, but it was of course on a div that was already the first child. Sorry about that. – razemauze Sep 29 '15 at 14:10
@rblarsen I added the full source code above if that helps. I've manually tested the margins when hovering over the first link using margin: 0px -1px 0px 0px, and the rest of them using margin: 0px -1px, and it gets the effect that I want. I'm just not sure why it won't take the #navigation a:first-child:hover {...}. – Beaker Sep 29 '15 at 14:33
1

@Beaker You have spelled "navigation" wrong in your HTML – razemauze Sep 29 '15 at 14:37

score 4 · Answer 2 · answered Sep 29 '15 at 13:55

4

try this. Select 'a:first-child'

a:hover {
    color: red;
}

#example a:first-child:hover {
    color: black;
    font-size: 20px;
}

<div id="example">
     <a href="something1.html">Link 1</a>
     <a href="something2.html">Link 2</a>
     <a href="something3.html">Link 3</a>
 </div>

answered Sep 29 '15 at 13:55

TOho

320
4
9

Completely ignoring it :/ – Beaker Sep 29 '15 at 14:09
As far as I can tell, this is a great answer, as it demonstrates exactly how you can apply a separate hover effect to the first child, as it seems the question is about. If this doesn't answer your question we could use some more information – xec Sep 29 '15 at 14:13
@xec I'll edit above to show the full source code, I hope that helps – Beaker Sep 29 '15 at 14:20

score 3 · Answer 3 · edited May 23 '17 at 11:58

The selector #example:first-child means the first child that has the id 'example', if you want the first anchor child you need #example a:first-child instead

You could do something like the following:

a:hover {
    margin: 0px -1px;
}

#example a:first-child:hover {
    margin: 0px; /* applies to left and right as well as top and bottom margins */
}

<div id="example">
     <a href="something1.html">Link 1</a>
     <a href="something2.html">Link 2</a>
     <a href="something3.html">Link 3</a>
 </div>

Which will prevent the margin on hovered first-child from changing.

This is technically what you're asking for, but I suspect not what you wanted, as you still manipulate margins on Link 2 and Link 3, so hovering those will result in jitter.

Your comment says "Basically, when I hover the font-weight is increased. So, by setting the margins on each side to -1px it keeps the adjacent links from moving a bit on hover." - this is a bad idea. Different browsers and OSes will render bold fonts differently and 1px will never be right.

There are no simple solutions to this, but a couple workarounds:

do not change font-weight on hover, use underline or color change instead.
Make all links be a fixed width (so they do not rely on their content width, something like the following:

#example a {
    display: inline-block;
    width: 100px;
}

#example a:hover {
    font-weight: bold;
}

<div id="example">
     <a href="something1.html">Link 1</a>
     <a href="something2.html">Link 2</a>
     <a href="something3.html">Link 3</a>
 </div>

Googling for 'css hover bold' gave me this, which might work for you: Inline elements shifting when made bold on hover

CSS first child hover with a element

3 Answers3