带li标签的css“第一个孩子”

Question

   <ul>
        <li class="bla">aaa</li>
        <li class="my_li">sss</li>
        <li class="my_li">ddd</li>
        <li class="my_li">fff</li>
    </ul>

css:

    .my_li:first-child{
            color: #090;
    }

this not working, if make for first li tag class not "bla", but "my_li", alreday li element set green color. Someone tell please, why this happened.

Answer 1

The first element that is a member of the class "my_li" is the second child of its parent.

:first-child selects elements that are the first child of their parent.

Answer 2

You should use this selector:

.my_li:nth-child(2) { ... }

(if I'm understanding your question currently and you want the 2nd <li> to have this style)

Answer 3

It doesn't work because that selector means you're choosing an element with class my_li which is the first child of its parent, that is not present in your html.

Try

<ul>
    <li class="my_li">aaa</li>
    <li class="my_li">sss</li>
    <li class="my_li">ddd</li>
    <li class="my_li">fff</li>
</ul>

Then your rule will apply to aaa.

http://www.w3schools.com/cssref/sel_firstchild.asp

Answer 4

If you dont want to change the class for the first element, use :

ul li:first-child{
            color: #090;
    }

Answer 5

As Quentin said, :first-child referes to the first element of its parent.

If you want to target the first element of your example list, do this:

ul li:first-child {
   color: #090;
}

Answer 6

I think the best solution is to add a second class to your li element

CSS:

.first_li{ color:#090; }

<ul>
  <li class="bla">aaa</li>
  <li class="my_li first_li">sss</li>
  <li class="my_li">ddd</li>
  <li class="my_li">fff</li>
</ul>

you could solve your problem with the :nth-child(n) selector, but that means you need to know exactly in which order is the li element inside its parent ul (in this case 2nd child) and if you insert more elements this will fail.

css: .my_li:nth-child(2){ color: #090;}