선택자(selectors) - 유사클래스(pseudo-class) Part2

:empty

공백 유사클래스이다. 엘리먼트안에 아무것도 없어야 한다.

<div></div>

div크기만 정해줬고 배경색을 지정했다.


div{width:100px; height:100px;} 
div:empty{ background:#000;}

문서의 최상위 엘리먼트 html과 같다고 보면 된다. 왜 생겼는지 확신하지못하겠지만 스타일에서 html 지정시 충돌하는점을 방지하기위해서라 생각된다.

유일자식으로 자식이 하나밖에 없을때 유용하다.


<ul> 
  <li>첫번째 자식이고</li> 
  <li>두번째 자식이므로 적용안됨</li> 
  </ul> 
  <ul> 
  <li>자식하나뿐임</li> 
</ul>

아래와 같이 사용하면 자식 엘리먼트에 하나뿐임에 적용된다.


li:only-child {color: #F00;}

단하나뿐인 엘리먼트일때 시용한다

특정언어가 문서에 있을때 사용한다. 명확히라기위해서 html엘리먼트내에 어트리뷰트를 설정해야한다. 아래는 ISO지정 국가코드

<p>이 책은 프랑스의 어느 유명한 작가가 쓴글입니다</p> 
<p lang="fr">Ce livre est un artiste célèbre en France est sseungeul</p>

p:lang(fr){ color:#F00;}

위와 같을경우 아래 프랑스어가 빨간색으로 된다

스타일을 적용하되 괄호안의 지정자는 적용되지 않게한다. 아래의 예를보자


<p>여긴 적용됩니다</p> 
<p>여긴 적용됩니다</p> 
<p class="words">여긴 적용 안됩니다</p> 
<p class="words">여기도 적용 안됩니다</p>


p:not(.words){ font-size:24px; color:#336;}

위에 두개는 적용되고 괄호안에 클래스인 words는 적용안된다

예제를 보려면 아래를 보자