Text colouring in CSS within lists

Question

I'm working on CSS and i have a problem with colouring certain parts of a work. For example:

<ul id="nav"><li>cats</li></ul><ul><li>dogs</li></ul> 

I want to color the part with 'cats'.

I use

li#nav{color: green;}

to make "cats" green, but it is wrong.

How would that be?

Answer 1

If I'm getting your question correct, then your css was wrong you need to do this

<ul id="nav">
  <li>cats</li>
</ul>
<ul>
  <li>dogs</li>
</ul> 

#nav li {color:green}

Answer 2

The problem, is as I now understand is, that you want to only color the text and not the dot. For that case this is the solution:

1. So in CSS to achieve green cats and black (default) dot, as asked:

/* if you want to style every <li> element that is inside <ul id ='nav'> */

ul#nav li:first-line { 
   color: green; 
}

or

/* if you want to style every <li> element where the parent is a <ul id='nav'> */

ul#nav > li:first-line { 
   color: green; 
}

2. In case you would like to have green dot and green cat, then remove :first-line

 ul#nav li { 
    color: green; 
 }

3. In case you would like to have red dot and green cat, then do

ul#nav li {color: red;}
ul#nav li:first-line {color: green}

Note: you can also just use #nav li, instead of ul#nav li, but that will color <li> tag inside <ol id='nav'> and <menu id='nav'> tags too.

Note 2: :first-line is a CSS Pseudo-element (in case you'd like to search for it)