클래스가있는 첫 번째 요소 스타일

Question

특정 클래스의 첫 번째 요소 만 스타일을 지정하는 방법이 있습니까? The first-child psuedo selector는 태그에서만 작동하는 것으로 보입니다.

EDIT : 모든 클래스가 동일한 상위 요소를 갖고있는 것은 아니므로, first-child는 옵션이 아닙니다.

Answer 1

첫 번째 클래스 선택기가 없습니다.

참조 BoltClock의 대답 (CSS3 selector :first-of-type with class name?)

주위 작품이 있지만, 그것은 나

을 위해 작동하지 않았다

Answer 2

당신은 다음과 같이 시도 할 수 있습니다 :

<div> 
    <p class="blue">1st</p> 
    <div class="blue">2nd</div> 
</div> 
<div> 
    <div class="blue">3rd</p> 
    <div class="blue">4th</div> 
</div> 

그래서이 파란색

으로 첫 번째 요소를 만들 것 또한 :first-child pseudo-class

은 확인 : 첫 번째 아이가 의사 클래스가 일치 첫 번째 요소는 다른 요소의 자식 요소입니다.

Answer 3

.class-name:nth-of-type(1)

이것은 당신이 JsFiddle example

Answer 4

이 당신은 당신의 클래스 이름을 재확인 할 필요가 .classNamep:first-of-type

Answer 5

작업을해야 원하는 스타일을해야한다. 오타가 발생할 수 있습니다.

이 부분을 참조하십시오. fiddle. :first-child이 클래스 선택자와 함께 작동한다는 것을 보여줍니다. :)

코드 : nth-child() 의사 클래스 선택기를 사용

<span class="spana">first</span> 
<span class="spana">second</span> 

.spana:first-child { 
    background-color: #ddd; 
} 

Answer 6

이는 IE9 +를 포함한 모든 주요 브라우저에서 지원됩니다 좋은 방법입니다.

<div class="blue">Will be blue</div>  
<div class="blue">Will not be blue</div> 
<div class="blue">Will not be blue</div> 
<div class="blue">Will not be blue</div> 

그리고 CSS :이 클래스 이름 blue의 첫 번째 사업부를 선택합니다

.blue:nth-child(1) { 
    color: blue; 
} 

여기

은 예제 HTML이다. 첫 번째 반복은 예를 들어 0이 아닌 pseudo 클래스에 1을 전달하여 선택된다는 점을 염두에 두십시오.

의사 클래스의 다른 주요 기능은 nth-child()입니다. 이전에 보았 듯이 숫자를 전달할 때 pseudo 클래스는 even 또는 odd과 같은 핵심 단어도 지원합니다.

//Applies styling to every even instance of the class .blue 
.blue:nth-child(even) { 
    color: blue; 
} 

//Applies styling to every odd instance of the class .blue 
.blue:nth-child(odd) { 
    color: blue; 
} 

이것은 또한 더 취해질 수있다; 공식은 스타일링이 적용될 정확한 요소에 대해 표현 될 수 있습니다. 수식은 an+b으로 표시되며, 여기서 a는 선택할 요소의 빈도이며 b는 오프셋입니다. 따라서 수식 3n+4은 네 번째 요소에 스타일을 적용하고 세 번째 요소에는 세 번째 요소를 적용합니다. (4, 7, 10, 13, 16 등 ...). 다음은 이것이 어떻게 적용될 수 있는지에 대한 예입니다.

//Style every 6th instance of the class .blue, starting with the second element. (2, 8, 14, 20, 26). 
.blue:nth-child(6n+2) { 
    color: blue; 
} 

오프셋이 필요하지 않으면 이전과 같은 수식을 전달하고 끝에 오프셋을 놓으십시오. 예를 들어 4n을 전달하면됩니다.

이 의사가 도움이되기를 바랍니다. 나는이 의사 클래스가 매우 강력하고 많은 사람들이 동등하게 평가했다고 생각합니다.