Title: css selecting
Last modified: August 19, 2016

---

# css selecting

 *  [miocene22](https://wordpress.org/support/users/miocene22/)
 * (@miocene22)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/css-selecting/)
 * 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](https://wordpress.org/support/users/twelvefootsnowman/)
 * (@twelvefootsnowman)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/css-selecting/#post-1725015)
 * 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.
 * 
 *  [Lindsey](https://wordpress.org/support/users/lalindsey/)
 * (@lalindsey)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/css-selecting/#post-1725036)
 * 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](https://wordpress.org/support/users/miocene22/)
 * (@miocene22)
 * [15 years, 7 months ago](https://wordpress.org/support/topic/css-selecting/#post-1725095)
 * 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 a`s 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.

 * 3 replies
 * 3 participants
 * Last reply from: [miocene22](https://wordpress.org/support/users/miocene22/)
 * Last activity: [15 years, 7 months ago](https://wordpress.org/support/topic/css-selecting/#post-1725095)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics