basil3 basil3 - 17 days ago 6
CSS Question

Remove underline from h text inside a element using CSS

I am having trouble removing the automatic browser underlining of my text in the following code.

<div class="section-one">

<div class="row products-top-row">
<a href="product_main.php?cat=Dress" class="col span-1-of-2 product-dress-image-main">
<div>
<h2>Dresses</h2>
</div>
</a>
</div>
</div>


In my CSS file I have tried the following, which I thought would work:

.product-dress-image-main a {

text-decoration: none;

}


I have also attempted:

.product-dress-image-main a:active,
.product-dress-image-main a:hover,
.product-dress-image-main a:visited,
.product-dress-image-main a:link {

text-decoration: none;

}


I have even gone so far as to try doing a global:

a {
text-decoration: none;
}


None of these work, but when I add the styling directly (as seen in the below example), it does remove the underline? Why will it not do it in the CSS doc? I assume I may be messing something up with my hierarchy.

<div class="section-one">

<div class="row products-top-row">
<a href="product_main.php?cat=Dress" class="col span-1-of-2 product-dress-image-main" style="text-decoration:none">
<div>
<h2>Dresses</h2>
</div>
</a>
</div>
</div>


FYI - the reason I have the div contained within the element is that I am using the entire div element as a link (clickable picture on a homepage to take customer to a product page).

Any advice is greatly appreciated!!!

Answer

Your CSS is targeting the <a/> as a child of .product-dress-image-main. This should work:

a.product-dress-image-main {
    text-decoration: none;    
}

For more information: CSS Selector Reference