CSS 콤비 선택

Question

다음과 같은 CSS 클래스를 대상으로하는 쉬운 방법이 있는지가 팽창 약간의 원인이 될 수 있기 때문에이 궁금 : 나는 끈적 끈적한 헤더를 사용하지 않으려는 어디, 다른 하나의 페이지가

을 다른 요소가 해당 페이지에 고정되어 사용되기 때문입니다. 내가 20 배 이상 선택기 클래스를 사용하도록 종료하고 20 페이지의 끈적 끈적한 헤더를 사용하지 않으려면

.page-id-xx .header-is-sticky .header { 
position: static; 
} 

있지만 페이지-ID-XX는 : 지금까지 내가 사용하여 이러한 클래스를 선택 변화. 그것은 다음과 같이 것 : 나는 궁금

.page-id-1 .header-is-sticky .header, 
.page-id-2 .header-is-sticky .header, 
.page-id-3 .header-is-sticky .header, 

and so on ... 

을의 .header 클래스를 대상으로보다 지능적인 방법은 어쩌면 일부 combiselectors의 도움이 있다면? 또는 빠른 자바 스크립트 스 니펫이 있습니까? 요소의 ID (#subnav)를 검사하여 if 루프를 만들 수 있습니다.이 페이지는 해당 페이지의 헤더에 번갈아 붙어 있어야합니다. 사전에

감사합니다 :)

Answer 1

아마도 불필요한 특이성?

당신이 절대적으로 부모의 선택 (즉 page-id-n)가 필요합니까하지 않을 경우, 다음 분명히 아주 조금 더 우아한 것 다음

.header-is-sticky .header { 
    position: static; 
} 

는 CSS 셀렉터를 활용

CSS는 일련의 attribute selectors을 제공하여 속성에 대한 다양한 제약 조건에 따라 특정 요소를 대상으로 지정할 수 있습니다. starts-with 및 contains 선택자는 여기에서 필요에 따라 작동합니다.

/* This will match any element that has a class attribute that starts with "page-id" */ 
[class^="page-id"] .header-is-sticky .header { 
    position: static; 
} 

/* This will match any element that has a class attribute that contains "page-id" */ 
[class*="page-id"] .header-is-sticky .header { 
    position: static; 
}