CODEWITHSUNDEEP
htmlcsscss-selectors
kmb
kmb

Reputation: 871

CSS class for span inside a inside p

I have such a structure of HTML:

<p>
    <a href="#">
        <span class = "class-for-span"> SOME TEXT HERE </span>
    </a>
</p>

and CSS:

p a{
    color: grey;
    text-decoration: underline;
}

.class-for-span {
    color: red;
    text-decoretion: none;
}

.class-for-span:hover {
    text-decoration:underline;
}

I want to get somethink like this:

For every a inside p i need grey underlined link. If there is span into a tag it must be red without decoration, and red underlined when its hover.

Now I have grey underlined link, if span inside a tag - red link with grey underline and red link with red udnerline when it's hover.

How can i solve my problem only with css? I've been trying also something like this:

p a span .class-for-span {
text-decoration: none;
}

but it's not working too...

Upvotes: 4

Views: 57113

Answers (3)

James Donnelly
James Donnelly

Reputation: 128791

p a span .class-for-span {
    text-decoration: none;
}

Won't work because of the space between span and .class-.... That would imply "the element with class class-... within the span". You can't overwrite an element's parent's property in CSS. The solution would be to set text-decoration:none; on the a tag and only use it on the span:

p a { text-decoration:none; }
p a span.class-for-span { text-decoration:none; }
p a:hover span.class-for-span { text-decoration:underline; }

This will cause the underline to appear when the anchor is hovered over, but not necessarily when the span is hovered over. So the underline would still appear on the span even if you had:

<a href="..."><span>Text</span><img src="..." alt="" /></a>

...and hovered over the image.

Upvotes: 4

Ozzy
Ozzy

Reputation: 8312

p a:link, p a:hover, p a:active, p a:visited {
  /* works for any 'a' tag inside a 'p' tag */
  border-bottom: 2px dotted #CCCCCC;
}

that will work for these:

<p><a href="#">Hello</a><br>
<a href="#">Hello again</a></p>

Upvotes: 1

bizzehdee
bizzehdee

Reputation: 21003

the a element is what is being underlined, not the span, so when you remove the underline from the span, you still have the a element keeping its underline. make your original block

p a span {
color: grey;
text-decoration: underline;
}

and everything should begin to work

Upvotes: 1

Related Questions