adding styling to hyperlink tags in a CSS component

Question

I am trying to add styling to hyperlinks in my CSS compoment. Normally on HTML, I would have done it as follows:

<style>
a:link, a:visited { 
  color: /* browser's internal value */;
  text-decoration: underline;
  cursor: auto;
}
</style>

I trying to add the above stying to my CSS component as follows:

THIS a:link, a:visited { 
      color: /* browser's internal value */;
      text-decoration: underline;
      cursor: auto;
}

The aura Lightning component does not like my code, and complaints with the following error:

Deployment Failed FIELD_INTEGRITY_EXCEPTION - Issue(s) found by CSS Parser (c.MarkUpPreview): Unable to parse remaining declaration value '(internal value)' (did you forget a semicolon?): at line 2, column 12 near '»(internal value)' : Source

Any idea how I can solve this issue?

Answer 1

EDIT: Thanks to @poz I also learned something new today, you can comma separate tags by making sure to add .THIS after the comma and a space: New proposed solution:

.THIS a:link, .THIS a:visited {
      color: ;/* browser's internal value */
      text-decoration: underline;
      cursor: auto;
}

Hi I think you just have some syntax issue here:

Please review and try the following:

Note the . prior to THIS, and no comma between link and visited props.

Depending on your lightning version you may need to use the following:

.THIS a:link {
      color: ;/* browser's internal value */
      text-decoration: underline;
      cursor: auto;
}

.THIS a:visited {
      color: ;/* browser's internal value */
      text-decoration: underline;
      cursor: auto;
}

Hope this helps!

Answer 2

You need to update your CSS selector to

.THIS a:link, .THIS a:visited

As Brandon mentioned, you need a . in front of THIS (this is a CSS class selector).

However, you also need to prefix the second a:visited selector with .THIS to maintain the same scope.