Making Hyperlink colors specific to just one <UL> Unordered List with SASS and CSS

Updated: at 11:18 PM

 

I’m having to do much of my own CSS for the Silicon Valley Code Camp which happens in just two short weeks.  I’ve never been very good at CSS and SASS but having been thrown into the first somewhat I’m learning quickly.  I’m not sure the original intent, but the default on the SV Code Camp site for hyperlinks is not to show them.  I think it might have to do with the menu structure but the person who made that decision is tens of thousands of miles away and not available.

What I want to do is create a new class I can use in my unorder list that just affects that one list and does not break the rest of the site.  Here is what I put in the SASS file to make this happen.

a.myhyperlink {
  color: #ce4dd6;
  &:hover { color: #ffb3ff; }
  &:visited { color: #c458cb; }
}

 

Here is the CSS it compiles into:

/* line 64, ../Sass/svcc.scss */
a.myhyperlink {
  color: #ce4dd6;
}
/* line 66, ../Sass/svcc.scss */
a.myhyperlink:hover {
  color: #ffb3ff;
}
/* line 67, ../Sass/svcc.scss */
a.myhyperlink:visited {
  color: #c458cb;
}

 

And then, all I have to add to my Unorder list is a class definition as follows:

<ul class="myhyperlink">
    <li>Identify and/or solicit speakers</li>
    <li>Registration (in advance and/or day of the event)</li>
    <li>Room Monitoring</li>
    <li>Parking </li>
    <li>Web Site Help</li>
    <li>Event Support (helping with setup, putting up signs, etc. just before the event)</li>
    <li>Food preparation</li>
    <li>Getting raffle items</li>
</ul>

 

HTH’s.