Specificity, etc

HTML & CSS
1

I have a div in which link behavior is set with a pseudo-underline (using a border-bottom spaced away from the descenders).

I’m having problems removing that bottom border from one specific element - a paragraph with a class (and for which I can’t instead use an ID).

Specificity has always been about as clear to me as a foreign language, and I’ve thus-far not yet understood enough of it for this case.
What’s the ‘best’ way to override that default link behavior and remove the border-bottom from those paragraphs?


Example css:

#content2 a:link,
#content2 a:visited
{
font-weight:normal;
color: #333;
padding-bottom: 1px;
border-bottom: 1px solid #ccc;
}

#content2 a:hover
{
font-weight:normal;
color: #76b332;
padding-bottom: 1px;
border-bottom: 1px solid #76b332;
}


#content2 p.filed a:link,
#content2 p.filed a:visited
{
font-weight:normal;
color: #333;
border-bottom: 0;
}

#content2 p.filed a:hover
{
font-weight:normal;
color: #76b332;
border-bottom: 0;
}
2

Hi,

Looking at your code it seems what you have should work and in constructing the html from the css it seems to works for me ok.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
[B]a {
    text-decoration:none
}[/B]
#content2 a:link, #content2 a:visited {
    font-weight:normal;
    color: #333;
    padding-bottom: 1px;
    border-bottom: 1px solid #ccc;
}
#content2 a:hover {
    font-weight:normal;
    color: #76b332;
    padding-bottom: 1px;
    border-bottom: 1px solid #76b332;
}
#content2 p.filed a:link, #content2 p.filed a:visited {
    font-weight:normal;
    color: #333;
    border-bottom: 0;
}
#content2 p.filed a:hover {
    font-weight:normal;
    color: #76b332;
    border-bottom: 0;
}
</style>
</head>
<body>
<div id="content2">
    <p><a href="#">test</a></p>
    <p[B] class="filed"[/B]><a href="#">test no border </a></p>
</div>
</body>
</html>

The rules “#content2 p.filed a etc…” will have more weight than the rules “#content2 a” and will win out.

If they are not working then there is something else at play and we’d need to see your html and full css. :slight_smile:

3

lol - no problem - I forgot to mention I added it anyway so served as a reminder :slight_smile:

4

Thanks all - appreciated.

1 The default underline was removed in the onsite css - but I forgot to include it in the clip here.

2 My crap eyes hadn’t seen that the onsite css was missing a closing curly bracket - a botched cut-and-paste. So, with that now replaced, the style I thought would work does as expected.

5

As highlighted in bold in my example :slight_smile:

6

Wasn’t trying to hi-jack your solution. I started composing my response before you had posted, but finished after. :shifty:

7

can u give us an example page?

8

Greetings,

I’ve tried to test this CSS using the following example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Document Title</title>
</head>
<style>
#content2 a:link,
#content2 a:visited
{
font-weight:normal;
color: #333;
padding-bottom: 1px;
border-bottom: 1px solid #ccc;
}

#content2 a:hover
{
font-weight:normal;
color: #76b332;
padding-bottom: 1px;
border-bottom: 1px solid #76b332;
}


#content2 p.filed a:link,
#content2 p.filed a:visited
{
font-weight:normal;
color: #333;
border-bottom: 0;
}

#content2 p.filed a:hover
{
font-weight:normal;
color: #76b332;
border-bottom: 0;
}
</style>
<body>

	<div id="content2">
		<p><a href="#">test</a></p>
		<p><a href="#">test</a></p>
		<p class="filed"><a href="#">test</a></p>
		<p class="filed"><a href="#">test</a></p>
		<p><a href="#">test</a></p>
		<p><a href="#">test</a></p>
	</div>
 
</body>
</html>

It appears that the borders are being removed from below the ‘p.filed’ elements, but the actual default link underlining is still there.

If this is what you are trying to get rid of, use (note: text-decoration:none;):


#content2 p.filed a:link,
#content2 p.filed a:visited
{
font-weight:normal;
color: #333;
border-bottom: 0;
text-decoration:none;
}

#content2 p.filed a:hover
{
font-weight:normal;
color: #76b332;
border-bottom: 0;
text-decoration:none;
}
9

hey that was what i was saying >.<