CODEWITHSUNDEEP
htmlcsshyperlinkstylesheet
Matt
Matt

Reputation: 303

(Follow-up) CSS Style a specific link

This is a follow-up to a previous question on Stack Overflow (see referenced link). Consider the following code (pulled from W3Schools):

/* unvisited link */
a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000FF;
}

If I include this in a page, this changes the attributes of all its links. What if I want to only modify these attributes for specific links? Links in the sidebar of my page, for instance.

I believe the solution will be tricker than the one in the referenced Stack Overflow question. I attempted to nest these in some .class selectors and making <a class="my_class" href="#">Hello World</a>, but this does not seem to work.

Upvotes: 0

Views: 2184

Answers (2)

MikeMitchell
MikeMitchell

Reputation: 32

Simple Styling

To achieve what you're looking for, you can apply a class to the container that will house your sidebar links (we'll use .sidebar in this example) and then target any anchors that fall within the container that the .sidebar class is applied to.

Markup:

<div class="sidebar">
    <a href="/">Lorem Ipsum</a>
    <a href="/about">Lorem Ipsum</a>
    <a href="/contact">Lorem Ipsum</a>
</div>


CSS: 

/* font family, text-decoration, and font-size for all of the links you want to style */
.sidebar a {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-decoration: none;
    font-size: 1em;
}

/* color for the unvisited links you want to style */
.sidebar a:link {
    color: #FF0000;
} 

/* color for the visited links you want to style */
.sidebar a:visited {
    color: #00FF00;
}

/* underline the links you want to style when hovered */
.sidebar a:hover {
    text-decoration: underline;
}

/* color for the active links you want to style */
.sidebar a:active {
    color: #0000FF;
}


Tip: If you use descriptive ("semantic") classnames like .sidebar, you make it easier for you (and other developers) to identify which elements are being styled.


Further Customization:

What if you wanted to apply a little extra customization to one (or more) of your sidebar links so that it stood out from the rest? Well, let's pretend you wanted one of those links to be green.

You could achieve this by applying a class to one of the anchors in our container.

Markup: 

<div class="sidebar">
    <a href="index.html" class="green">Lorem Ipsum in GREEN!</a>
    <a href="/about">Lorem Ipsum</a>
    <a href="/contact">Lorem Ipsum</a>
</div>


CSS:

/* font family, text-decoration, and font-size for all of the links you want to style */
.sidebar a {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    text-decoration: none;
    font-size: 1em;
}

/* color for the unvisited links you want to style */
.sidebar a:link {
    color: #FF0000;
} 

/* color for the visited links you want to style */
.sidebar a:visited {
    color: #00FF00;
}

/* underline the links you want to style when hovered */
.sidebar a:hover {
    text-decoration: underline;
}

/* color for the active links you want to style */
.sidebar a:active {
    color: #0000FF;
}

/* override the color of one of our sidebar links to be green! */
.sidebar a.green {
    color: green;
}

I hope this helped!

EDIT: Cleaned up for simplicity.

Upvotes: 1

Brandon
Brandon

Reputation: 69973

You can give the sidebar a class and style only the child link elements.

e.g.

<div class="sidebar">
    ...links
</div>

.sidebar a:link {
   color: #FF0000;
}
.sidebar a:visited {
  color: #00FF00;
}

...etc.

The solution in the linked example would also work if you gave a specific class to the link elements. Just be sure that you're adding the class after the element and not the pseudo-selector.

e.g. a.my_class:visited and not a:visited.my_class

Upvotes: 4

Related Questions