Couldn't select child element

Question

.test .par:first-child .test1 .test2 {
  color: red;
}

<div class="test">
  <p>test</p>
  <p>testable</p>
  <p class="par">
    This is <i class="test1"> dsd <i class="test2">red</i>text.</i> test
  </p>
  <p class="par">
    This is <i class="test1"> dsd <i class="test2">shouldn't changed</i> text.</i> test
  </p>
</div>

In the above code, what i would like to do is to apply a css for the first class test2 but i couldn't do that. That css didn't do the thing. Please help.

UPDATE

NB: the p elements within the parent div element are generated dynamically. it means that sometimes there are more p elements before the first test2 element and sometimes the test2 elements are the first element from the parent.

Answer 1

The container .test contain 4 p elements so the element you are targeting is not the first-child but the 3rd one. Instead you can do this :

.test .par:nth-child(3) .test1 .test2 {
  color: red;
}

/*
Or simply
.test p:nth-child(3) .test1 .test2 {
  color: red;
}
*/

<div class="test">
  <p>test</p>
  <p>testable</p>
  <p class="par">
    This is
    <i class="test1">
              dsd
              <i class="test2">red</i> text.
    </i>
    test
  </p>
  <p class="par">
    This is
    <i class="test1">
              dsd
              <i class="test2">shouldn't changed</i> text.
    </i>
    test
  </p>
</div>

UPDATE

If the p elements are dynamicly generated you will not able to select your .test2 element with the current HTML structure (unless you are able to change it). We can also consider the use of nth-of-type but .test2 is at the same range in both p element.

By the way here is a non-CSS solution if interested with :

$('.par').eq(0).find('.test2').css('color','red');

//to only consider test2 you can simply use :
//$('.test2').eq(0).css('color','red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">
  <p>test</p>
  <p>testable</p>
  <p class="par">
    This is
    <i class="test1">
              dsd
              <i class="test2">red</i> text.
    </i>
    test
  </p>
  <p class="par">
    This is
    <i class="test1">
              dsd
              <i class="test2">shouldn't changed</i> text.
    </i>
    test
  </p>
</div>

Answer 2

.par:first-child is equal *.par:first-child and It means select any element that is first children his parent and have class per; so, dont select <p class="par"> because it is not first children.it is 3nd children so use this:

.test .par:nth-child(3) .test1 .test2 {

.test .par:nth-child(3) .test1 .test2 {
  color: red;
} 

    <div class="test">
    <p>test</p>
    <p>testable</p>
    <p class="par">
        This is 
          <i class="test1">
              dsd
              <i class="test2">red</i>
              text.
          </i>
        test
    </p>
    <p class="par">
        This is 
          <i class="test1">
              dsd
              <i class="test2">shouldn't changed</i>
              text.
          </i>
        test
    </p>
    </div>

UPDATE:

If p generated dynamically and you only want first .par use this:

.test .par .test1 .test2 {
  color: red;
} 

.test .par ~ .par .test1 .test2 {
  color: black;
} 

.test .par .test1 .test2 {
  color: red;
} 

.test .par ~ .par .test1 .test2 {
  color: black;
} 

<div class="test">

  <p>test</p>
  <p>testable</p>
  <p class="par">
    This is <i class="test1"> dsd <i class="test2">red</i>text.</i> test
  </p>

  <p class="par">
    This is <i class="test1"> dsd <i class="test2">shouldn't changed</i> text.</i> test
  </p>

</div>