CSS Target a class inside a link tag

Posted on 2014-02-14
Medium Priority
Last Modified: 2014-02-14
I have the following HTML code
<div class="arc-article">
<div id="BehindScenes"><a href="http://digital.faithtoday.ca/faithtoday/20140102#pg7">
<h3>Behind<span class="text-maroon">TheScenes</span></h3>...

Open in new window

and the following CSS code

.arc-article a:visited,
.arc-article a:link,
.arc-article a:active {
	text-decoration: none;
	color: #000;

.arc-article a:hover{
	text-decoration: none;
	color: #666;

.text-maroon {
	color: #9b373f;

Open in new window

When I hover, the h3 tag gets the correct #666 color, but I want the span tag to also get the hover over affect.  I understand why it's happening, but how do I target the text-maroon class to hover the same #666 color?

How do I target span class

Question by:dauyeung
1 Comment

Accepted Solution

Adrian Crabtree earned 2000 total points
ID: 39860274
Hi dauyeung, if you target the span that's within the anchor, you should be able to change the colors. I have set up an example here: http://jsfiddle.net/Lxck3/

.arc-article a:hover,
.arc-article a:hover span {
	text-decoration: none;
	color: #666;

Open in new window


Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

607 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question