setting font color inside a li tag

Question

My markup looks like:

<div class="c1">
      <li class="c2"><a href="">blah</a></li>
</div>

I want the text blah to be red.

c1 is used other places, so I want to drill down as much as possible without affecting other markup.

Answer 1

<style>
  div.c1 li.c2 a { color: red; }
</style>

Answer 2

Use this style definition in your css-file:

div.c1 li.c2 a {
  color: red;
}

PS: Having your <li> tag inside your <div>-tag without an <ul>-tag is not recommended.

Answer 3

.c1 .c2 a {
  color: red;
}

Answer 4

.c2 a
{
     color: red;
}

Answer 5

The following code will do (very specific).

.c1 .c2 a { color: red; }

Answer 6

<div class="c1">
      <li class="c2"><a href="">blah</a></li>
</div>
<style>
  div.c1 li.c2 a { color: red; }
</style>

Answer 7

Use the following rule:

div.c1 li.c2 a {
    color: red;
}

This matches a tags inside of li tags with class c2 inside of div tags with class c1.

For added uniqueness, you might want to give the a tag its own class name.

Also, li tags should only appear inside of list tags. (ul or ol).
Did you mean <li class="c1">?

Answer 8

The most specific CSS selectors would probably be

div.c1 > li.c2 > a:link,
div.c1 > li.c2 > a:active,
div.c1 > li.c2 > a:hover,
div.c1 > li.c2 > a:visited {
    color: red;
}

The more specific the CSS selectors, the less work for the browser's rendering engine.

However, something is wrong with your markup if this is supposed to be HTML and the <li> element's parent is a <div> instead of <ol> or <ul>.