<span>p {
</span> <span>font-weight: bold;
</span><span>}
</span>
: is ()는 모든 현대식 브라우저에서 완전히 지원되는 기본 CSS 솔루션을 제공합니다 (IE가 아님).
<span>/* default black */
</span><span>p {
</span> <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span> <span>color: #444;
</span><span>}
</span>
단일 선택기는 다음의 모든 숫자를 포함 할 수 있습니다. is () 의사 클래스. 예를 들어, 다음 복잡한 선택기는 , 및
요소에 녹색 텍스트 색상을 적용합니다.
다음과 같은 동등한 코드 : IS () 6 개의 CSS 선택기가 필요합니다.
특이성 CSS : 여기서 의사 클래스 선택기
<span>article, section, aside {
</span>
<span>p {
</span> <span>color: #444;
</span> <span>}
</span>
<span>}
</span>입니다. 특이성은 어떤 CSS 선택기가 다른 모든 것을 무시할 CSS 선택기를 결정하는 데 사용되는 알고리즘입니다. 다음 예에서, 기사 P는 P만으로는 더 구체적이므로 <span><span>:is(article, section, aside) p</span> {
</span> <span>color: #444;
</span><span>}
</span>
IS ()의 경우, 특이성은 인수 내에서 가장 구체적인 선택기입니다. 다음의 경우 : 여기서 (), 특이성은 0입니다.
다음 CSS를 고려하십시오.
<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span> <span>color: green;
</span><span>}
</span>
이 CSS를 다음 HTML에 적용 해 보겠습니다.
<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span> <span>color: green;
</span><span>}
</span>
단락 텍스트는 다음 Codepen 데모에 표시된 것처럼 빨간색으로 표시됩니다.
<.> 펜을 참조하십시오
사용 : sitepoint (@sitepoint)의 선택자
Codepen: is () selector는 기사 P와 같은 특이성을 가지지 만 스타일 시트의 뒷부분에서 텍스트가 빨간색이됩니다. 다음 () 선택기는 어느 것보다 덜 구체적이기 때문에 파란색을 적용하기 위해 기사 P와 IS () 선택기를 모두 제거해야합니다.
더 많은 코드베이스는 다음을 사용합니다. 그러나 ()가 CSS 재설정에 실용적 일 수있는 곳의 0 가지 특이성은 특정 스타일을 사용할 수 없을 때 표준 스타일의 기준을 적용 할 수 있습니다. 일반적으로 리셋은 기본 글꼴, 색상, 패딩 및 여백을 적용합니다.
이 CSS 재설정 코드는 제목의 상단 마진을 적용합니다.
스타일 시트 후반에 사용자 정의
상단 마진을 설정하려고 시도하는 것은 효과가 없습니다.
더 높은 특이성 선택기를 사용 하여이 문제를 해결할 수 있지만 더 많은 코드이며 다른 개발자에게는 반드시 명확하지는 않습니다. 결국 필요한 이유를 잊게 될 것입니다.
<span>p {
</span> <span>font-weight: bold;
</span><span>}
</span>
각 스타일에 중요하지만 <span>/* default black */
</span><span>p {
</span> <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span> <span>color: #444;
</span><span>}
</span>를 피하십시오! <span>article, section, aside {
</span>
<span>p {
</span> <span>color: #444;
</span> <span>}
</span>
<span>}
</span> 는 더 많은 스타일과 개발이 훨씬 더 어려워집니다.
더 나은 선택은 CSS 재설정에서 다음 ()의 제로 특이성을 채택하는 것입니다.
<span><span>:is(article, section, aside) p</span> {
</span> <span>color: #444;
</span><span>}
</span>
이제 특이성에 관계없이 모든 CSS 재설정 스타일을 무시할 수 있습니다. 추가 선택기가 필요하지 않거나 중요합니다.
<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span> <span>color: green;
</span><span>}
</span>
CSS : 의사 클래스 선택기 가 있습니다
: () selector는 다음과 비슷한 구문을 사용합니다. 예를 들어, 다음은 하나 이상의
<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span> <span>color: green;
</span><span>}
</span>
이것은 수십 년 동안 가장 흥미로운 CSS 개발입니다!