Overriding CSS with a Different Link Color

Question

On my page, normal link color is blue and works well. However, I want to have white links on red background in an alert box. Can't seem to get this to work. Tried ordering differently, using !important , etc.

 .announcestripe { margin: 0 auto 0 auto; width: 964px; vertical-align: middle; text-align: left; color: #fff; background-color: red; padding: .5em; } a:link.announcestripe, a:visited.announcestripe, a:hover.announcestripe, a:active.announcestripe { color: #ffffff!important; text-decoration: underline; } .announcename { font-style: italic; font-weight: bold; padding-right: 1.5em; padding-left: 1em; font-size: 1.25em; } .announcetext1, .announcetext2 { font-size: 1em; padding-right: 1.5em; } 

 <div class="announcestripe"> <span class="announcename">LATEST NEWS:</span> <span class="announcetext1"><a href="https://www.architecturaldigest.com/story/universal-design-living-laboratory" target="_blank">UDLL Featured in Architectural Digest</a> <img src="../../images/_common/icons/16px/link16white.gif" width="16" height="16" alt="External Link" border="0" /></span> <span class="announcetext2"><a href="https://somepage.jwpapp.com/" target="_blank">TEDx Talk About UDLL</a> <img src="../../images/_common/icons/16px/link16white.gif" width="16" height="16" alt="External Link" border="0" /></span> </div> 

Thanks!

Answer 1

You have your link css formatted incorrectly. Instead of putting a:hover.announcestripe insert . announcestripe at the start; .announcestripe a:hover Then your desired formatting will work.

 .announcestripe { margin: 0 auto 0 auto; width: 964px; vertical-align: middle; text-align: left; color: #fff; background-color: red; padding: .5em; } .anouncestripe a:visited, .anouncestripe a:hover, .anouncestripe a:active { color: #ffffff!important; text-decoration: underline; } .announcename { font-style: italic; font-weight: bold; padding-right: 1.5em; padding-left: 1em; font-size: 1.25em; } .announcetext1, .announcetext2 { font-size: 1em; padding-right: 1.5em; } 

 <div class="announcestripe"> <span class="announcename">LATEST NEWS:</span> <span class="announcetext1"><a href="https://www.architecturaldigest.com/story/universal-design-living-laboratory" target="_blank">UDLL Featured in Architectural Digest</a> <img src="../../images/_common/icons/16px/link16white.gif" width="16" height="16" alt="External Link" border="0" /></span> <span class="announcetext2"><a href="https://somepage.jwpapp.com/" target="_blank">TEDx Talk About UDLL</a> <img src="../../images/_common/icons/16px/link16white.gif" width="16" height="16" alt="External Link" border="0" /></span> </div> 

Answer 2

Given your HTML it has to be .announcestripe a:link , not a:link.announcestripe . The latter would only target a elements with the class announcestripe (which your HTML doesn't have), whereas the corrected selector targets a elements that are descendants of an element with the class announcestripe (which is the case in your HTML).

 .announcestripe { margin: 0 auto 0 auto; width: 964px; vertical-align: middle; text-align: left; color: #fff; background-color: red; padding: .5em; } .announcestripe a:link, .announcestripe a:visited, .announcestripe a:hover, .announcestripe a:active { color: #ffffff!important; text-decoration: underline; } .announcename { font-style: italic; font-weight: bold; padding-right: 1.5em; padding-left: 1em; font-size: 1.25em; } .announcetext1, .announcetext2 { font-size: 1em; padding-right: 1.5em; } 

 <div class="announcestripe"> <span class="announcename">LATEST NEWS:</span> <span class="announcetext1"><a href="https://www.architecturaldigest.com/story/universal-design-living-laboratory" target="_blank">UDLL Featured in Architectural Digest</a> <img src="../../images/_common/icons/16px/link16white.gif" width="16" height="16" alt="External Link" border="0" /></span> <span class="announcetext2"><a href="https://somepage.jwpapp.com/" target="_blank">TEDx Talk About UDLL</a> <img src="../../images/_common/icons/16px/link16white.gif" width="16" height="16" alt="External Link" border="0" /></span> </div>