css selector for list item matching class

Question

I am learning CSS. I have a unordered list containing list items. The list items contains headers and sub list elements. I need to write css class specific to header and sub headers. i.e

<ul>
  <li class="header">
     <a .. </a>
  </li>
  <li class="menu-item">
     <a .. </a>
  </li>
  <li class="menu-item">
     <a .. </a>
  </li>
</ul>

in my css code, I have the style sheet as below:

ul{
 list-style: none outside none;
 }

to target my li with menu-item and header, how should i write my css class?

Answer 1

You can use the period (dot) to refer to a specific class. If you wanted to apply the same styles to multiple selectors, you can seperate them with a comma

In this instance:

/*Target any li element with a class of header*/
li.header {

}

/*Target any li element with a class of menu-item*/
li.menu-item{

}

/*Target any li element with a class of menu-item or header*/
li.menu-item, li.header{

}

Answer 2

There is many ways to achieve this :

/* using the class name */
.header {}
.menu-item {}

/* using the pseudo-class first-child */
li {} /* <-- every li item */
li:first-child {} /* <-- only the first li item, in your case the one with the .header class*/

/* using the "+" selector */
li {} /* <-- every li item */
li + li {} /* <-- every li items after the first one */    

Here a full list of selectors : http://www.w3schools.com/cssref/css_selectors.asp