CSS 잡아 모든 클래스 이름 마지막

Question

를 들어 나는 모든 클래스 이름 ('내 수준')를 잡고이를 변경하고자하는 경우를 제외하고는 분명히 I '는 마지막

에 대한 제외 붉은 에 색입니다 인터넷 검색을 해봤는데 수업이 끝나거나 뭐든간에 그런 일은 없습니다. JS을 사용하지 않고 주위에서 해결 방법을 찾으려고하는데 문제가 있습니다.

div1과 div2는 모두 동적입니다. div2가 없으면 div1은 첫 번째 p 요소가 빨간색이고 두 번째 요소는 빨간색이 아니어야합니다.

내가 셀렉터의 일부가되고 싶지 않기 때문에 상단에 'p'태그를 남겼습니다. 나는 단지 '나의 계급'을 구체적으로 필요로한다.

또는 내가 중첩 포함 내 컨테이너 내부의 모든 "P"의를 잡기 위해 쓸 수있는 선택이있다 P의

<p>Some text</p> 
<div class="my-container"> 
    <div class="div1"> 
    <p class="my-class"></p> 
    <p class="my-class"></p> 
    </div> 
    <div class="div2"> 
    <p class="my-class"></p> 
    <p class="my-class"></p> 
    <p class="my-class"></p> 
    <p class="my-class"></p> <!-- This tag should not be red--> 
    </div> 
</div> 

나는 또한 필요하다면 그에 포함 너무 주시기 말대꾸를 사용할 수 있습니다

.

나는이 작업을 수행하는 어떤 하나의 규칙의 모르겠지만, 간단한 해결 방법은 함께 2 개 개의 별도 규칙을 사용하는 것입니다

Answer 1

아래의 해결 방법을 사용할 수 있습니다.

div:last-child을 사용하십시오.

.my-container div p.my-class { 
 
color:red; 
 
} 
 
.my-container div:last-child p.my-class:last-child { 
 
color:blue; 
 
}

<p>Some text</p> 
 
<div class="my-container"> 
 
    <div class="div1"> 
 
    <p class="my-class">a</p> 
 
    <p class="my-class">a</p> 
 
    </div> 
 
    <div class="div2"> 
 
    <p class="my-class">a</p> 
 
    <p class="my-class">a</p> 
 
    <p class="my-class">a</p> 
 
    <p class="my-class">b</p> <!-- This tag should not be red--> 
 
    </div> 
 
</div>

즉 container 마지막 div 선택됩니다 만 존재하는 경우, 선택되고 그럼 마지막 div에서 마지막 p (이 예에서) 다른 컬러의 것

Answer 2

: 순서가 설정 중요하다는 것을

가

.my-class { 
    color: red; 
} 

.div-2 .my-class:last-child { 
    color: // whatever you want the default to be 
} 

노트 마지막 자식의 컬러는 먼저 모든 것을 설정 한 후에 수행해야

Answer 3

이 어떤 강제 리플 로우없이 찾고있는 행동을 얻을 것이다 :

.my-class:not(:last-child) { 
 
    color: red; 
 
}

<p>Some text</p> 
 
<div class="my-container"> 
 
    <div class="div1"> 
 
    <p class="my-class">a</p> 
 
    <p class="my-class">b</p> 
 
    </div> 
 
    <div class="div2"> 
 
    <p class="my-class">c</p> 
 
    <p class="my-class">d</p> 
 
    <p class="my-class">e</p> 
 
    <p class="my-class">f</p> <!-- This tag should not be red--> 
 
    </div> 
 
</div>

,312을