css selecting

  • miocene22

    (@miocene22)


    15 years, 7 months ago

    ok so I have a nice bit of simple html:

    <div>
<h2><a href=...>A title</a><h2>
<div>

    Now I want to have a bottom border over the whole h2 and when the link (the <a>) is hovered I want the border colour to change.

    CSS:

    h2{
border-bottom:1px #eee solid;
}

h2 a:hover ???{
border-color:blue;
}

    What goes where the ??? is? If I leave it as is it will set the border colour of the <a> when I actually want the border colour of the <h2> to be set.

    So my selector should say: when the <a>, that is inside/the child of an <h2> is hovered, set the css properties for the <h2>

    I what to have the border-bottom set to the <h2> rather than the <a> for these reasons:
    – the <a> is an inline element so the border will only extend as long as the text, whereas the <h2> is a block element so automatically takes up the entire width.
    – The rule will also be applied to <h2>s that are not links, and I don’t what the border colour to change on hover when the h2 is not a link.

Viewing 3 replies - 1 through 3 (of 3 total)
  • DigitalSquid

    (@twelvefootsnowman)

    15 years, 7 months ago

    You won’t be able to do it like. What you’re asking to do is select the parent of an element and that’s not possible with CSS. You’d be able to do it with Javascript or jQuery.

    However, if you want a pure CSS solution than you would probably have to give all the <h2> tags that contain anchor links a class that removes the border. Then make those tags block elements with the same border as the normal <h2> tags, and then use a:hover to change that border colour.

    Lindsey

    (@lalindsey)

    15 years, 7 months ago

    Well, why is it so much of a neccesity for the border definition to be on the h2?

    You could just set h2 a to display:block;

    You definitely don’t need javascript or jquery to do what you are looking for.

    I mean you could just set the a to float:left and give it the width you want in the CSS.

    So, you’re code would look like this:

    h2 a, h2 {
border-bottom:1px #eee solid;
display:block;
}

h2 a:hover {
border-color:blue;
}

    OR THIS

    h2 a, h2 {
float:left;
width:400px; /*change this to the width of the h2/column it is in so it displays correctly*/
border-bottom:1px #eee solid;
display:block;
}

h2 a:hover {
border-color:blue;
}

    -Lindsey

    Thread Starter miocene22

    (@miocene22)

    15 years, 7 months ago

    yeah that does most of want I want to do. Although if you apply bottom border to both h2 a and h2 you end up with linked h2s having 2 borders (one from each selection) and they are one on top of the other. So my 1px border looks like a 2px border.

    So basically I’ve just left out the unlinked h2 borders, so only h2 as have bottom border

    Thanks for the help

    p.s. no need to float left to set the width

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘css selecting’ is closed to new replies.