동일한 속성 값을 가진 둘 이상의 요소에 대한 선택자가 있습니까?

Question

이것을 작성하는 좀 더 우아한 방법이 있습니까?

.standard { 
    padding-top: 50px; 
    padding-bottom: 50px; 
} 
.standard.color-0 + .standard.color-0, 
.standard.color-1 + .standard.color-1, 
.standard.color-2 + .standard.color-2, 
.standard.color-3 + .standard.color-3, 
.standard.color-4 + .standard.color-4, 
.standard.color-5 + .standard.color-5, 
.standard.color-6 + .standard.color-6, 
.standard.color-7 + .standard.color-7, 
.standard.color-8 + .standard.color-8 { 
    padding-top: 0; 
} 

아마도 실제로 정확한 클래스의 이름을 모르는 상태에서 2 개 이상의 요소에있는 클래스의 일치를 확인 어떤 선택이 있습니까? 이러한 뭔가 등 :

나는 현재 (위 게시) 한 무엇

.standard.color-* + .standard.color-* { 
    padding-top: 0; 
} 

나는 내 사이트에 표시하는 방법으로 지금까지 그것을 원하는 방식으로 작동하지만, 난 그냥 여부 호기심, 또는 아니다, 나는 운명입니다 내가 필요한 모든 새로운 색상에 대해 항상 .standard.color-# + .standard.color-#을 추가하십시오 (이 경우에는 전체 폭이 <section> 태그 인 배경색 임).

예 :

<section class="standard color-0"></section> // top and bottom padding 
<section class="standard color-1"></section> // top and bottom padding 

----------------------------------------------------------------------- 

<section class="standard color-1"></section> // top and bottom padding 
<section class="standard color-1"></section> // padding-top: 0; (if both "color-#" is the exact same this loses its top padding) 

편집 : 단순화 된 포스트 코드. <section>은 항상 .standard 클래스이고 인 .color- 클래스는 background-color: transparent;입니다.

Answer 1

불행히도 선택자의 정적 특성으로 인해 CSS는 한 화합물 선택기가 a regex-like syntax이 아닌 다른 화합물 선택기의 부분을 참조하는 방법을 제공하지 않습니다. 따라서 예를 들어 두 가지 복합 선택기에서 실제 값을 하드 코딩하지 않고 이전 형제와 동일한 클래스 이름 또는 속성 값을 가진 요소를 일치시킬 수는 없습니다. 유일한 해결책은 가지고있는 솔루션입니다.

위의 질문에 대한 답에 언급했듯이 전처리기를 사용하는 경우이 작업을 다소 자동화 할 수 있습니다. CSS에서는 여전히 하드 코딩 된 선택기가 사용되지만 실제로 선택기를 쓰는 작업은 대신 선행 처리기로 오프로드됩니다. 여기 SCSS를 사용하는 예는 다음과 같습니다

.standard { 
    padding-top: 50px; 
    padding-bottom: 50px; 

    &%consecutive { 
    padding-top: 0; 
    } 

    // To accommodate more numbered classes simply edit this loop 
    @for $i from 0 through 8 { 
    &.color-#{$i} + &.color-#{$i} { 
     @extend %consecutive; 
    } 
    } 
} 

이 다시 사전에 값을 알고 있어야합니다. 가능한 모든 값을 적어 두거나 쓸 수 없다면 런타임에 값을 검사하는 스크립트를 작성해야합니다.