콤비네이션
동일한 속성을 가진 여러 선택기를 반복할 필요는 없으며 선택기를 쉼표(,)로 구분하기만 하면 됩니다.
예를 들어 다음 코드가 있습니다.
| h2 { 색상: 빨간색; } .thisOtherClass { 색상: 빨간색; } .yetAnotherClass { 색상: 빨간색; } |
그런 다음 다음과 같이 작성할 수 있습니다.
| h2, .thisOtherClass, .yetAnotherClass { 색상: 빨간색; } |
중첩됨
CSS가 잘 구조화되어 있으면 너무 많은 클래스나 식별자 선택기를 사용할 필요가 없습니다. 선택기 내에서 선택기를 지정할 수 있기 때문입니다. (또는 더 나은 표현은 컨텍스트 선택기 - 번역자에 의한 것입니다)
예를 들어:
| #맨 위 { 배경색: #ccc; 패딩: 1em } #상위 h1 { 색상: #ff0; } #탑피 { 색상: 빨간색; 글꼴 두께: 굵게; } |
다음과 같이 HTML에 적용하면 불필요한 클래스 또는 식별자 선택기가 제거됩니다.
| <div id="맨 위"> <h1>초콜릿 카레</h1> <p>초콜릿만으로 카레를 만드는 저의 레시피입니다</p> <p>으으으으으으으으으으으으</p> </div> |