Apply style to H3 if it is also a hyperlink?

Question

Hey SO, I am a bit rusty with my CSS, so bear with me :)

I am working with a layout that has a border-bottom property for h2,h3,h4,h5,h6. One of my pages uses h3 to display titles for a FAQ listing, and it has an anchor tag since there is an expand/contract script active (click title, FAQ appears below title). I do not want these particular h3 elements to have the border. Is there a particular CSS syntax that I can use to achieve this? maybe something like:

#content a,h3 {
    border-bottom:none;
}

This is obviously wrong since it will just clear any bottom borders for any a/h3 elements that reside in my content container.

thanks!

Clarification:

<h3><a href="#">Text</a></h3>

Answer 1

The following is a demonstration of what each css-selector would match to. Note that it is not acceptable by web-standards to place h3's within a's.

a h3 { styles }
<a href=""><h3>Hello</h3></a>

h3 a { styles }
<h3><a href="">Hello</a></h3>

Answer 2

#content a>h3 {  border-bottom:none; }

should do it. The > means 'next tag must be'.

#content a h3 {  border-bottom:none; }

would probably work too.

You use the comma for multiple rules e.g

h1, h2, h3 {
color: red;
}

For red h1 to h3

Answer 3

There's no CSS selector that will select elements based on their parent. The best solution is to give the FAQ container an ID or class and then:

#faq h3 {
    border-bottom: none;
}

Answer 4

Use this instead :

h3>a { text-decoration: none; }

Doing so you target every 'a' childs of 'h3'

Prefer the use of classes and tags selectors versus ids the most you can, as targeting ids tend to make your css code less flexible and extensible. Think inheritance as in OOP.

For further reading and complete coverage of the CSS selectors you can refer to : http://www.w3.org/TR/2009/CR-CSS2-20090423/selector.html#child-selectors

Cheers