CODEWITHSUNDEEP
htmlcss
gigaboy
gigaboy

Reputation: 29

Overriding CSS with a Different Link Color

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>

You can see what it looks like in the attached screenshot.

Thanks!

Upvotes: 0

Views: 65

Answers (2)

Rachel Gallen
Rachel Gallen

Reputation: 28563

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>

Upvotes: 3

connexo
connexo

Reputation: 56744

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>

Upvotes: 0

Related Questions