CSS 선택자 모음

예전에 한번 간단하게 정리했던 적이 있는 CSS 선택자... 그 당시에 빠뜨린 것도 있고 해서 이번 기회에 더 자세히 정리해 보았다.

 

 

태그 이름

태그 이름은 그냥 이름만 기재해서 바로 스타일링이 가능하다.

 

<h1> 해이나 월드 </h1>
<p> 안녕, 친구하지 않을래? </p>

<style>
  h1 {color: black;}
  p {color: grey;}
</style>

 

클래스 & 아이디

클래스는 마침표(.)로 시작, 아이디는 샾(#)으로 시작한다.

 

<p class="title"> 해이나 월드 </p>
<p id="text"> 안녕, 친구하지 않을래? </p>

<style>
  .title {color: black;}
  #text {color: grey;}
</style>

 

자식 & 직속 자식

자식과 직속 자식은 css로 스타일링 해줄때는 아래와 같이 표기한다. 아래 예제에서 자식에 스타일링을 한 경우 해당 박스 안에 <i> 태그를 가지고 있는 모든 요소에 적용되는 반면, 직속 자식에 스타일링을 한 경우 다른 태그로 한번 더 감싸진 태그는 스타일링이 적용되지 않는다.

 

<div class="box">
<i>나는 box의 직속 자식입니다.</i>
<p>나는 box의 <i>직속 자식은 아닙니다.</i> p태그로 감싸져 있어요.</p>
<i>나는 box의 직속 자식입니다.</i>
</div>

<style>
/* 자식에 스타일링 */
.box i {color: blue;}

/* 직속 자식에만 스타일링 */
.box > i {color: blue;}
</style>

 

복수 선택

여러 개의 클래스에 한꺼번에 동일한 스타일링을 하고 싶을 때는 클래스 사이에 쉼표(,)를 사용한다.

 

<div class="div1"> hello </div>
<div class="div2"> world </div>

<style>
.div1, .div2 {color: red;}
</style>

 

여러 조건 

조건을 모두 만족하는 클래스에 스타일링을 하고 싶을 때는 띄어쓰기 없이 연속해서 선택자를 입력해주면 된다.

 

<div class="box1 red"></div>
<div class="box1 blue"></div>
<div class="box2 red"></div>
<div class="box2 blue"></div>

<style>
.box1.red {color: red;}
/* box1과 red를 동시에 가지고 있는 div만 레드 색상 적용됨 */

.box2.blue {color: blue;}
/* box2과 blue를 동시에 가지고 있는 div만 블루 색상 적용됨 */
</style>

 

가상 클래스

콜론(:)을 이용해서 마우스 오버 또는 특정 요소에만 스타일링을 할 수 있다.

 

<h1>과일나라</h1>
<div class="box">
 <p>사과</p>
 <p>바나나</p>
 <p>오렌지</p>
 <p>포도</p>
</div>

<style>
  .box p:first-child{color: red;}
  /* box 클래스의 첫번째 자식 요소인 <p> 태그에만 스타일링 적용 */
  
  .box p:last-child{color: purple;}
  /* box 클래스의 마지막 자식 요소인 <p> 태그에만 스타일링 적용 */
  
  .box p:nth-child(2) {color: yellow;}
  /* box 클래스의 두번째 자식 요소인 <p> 태그에만 스타일링 적용 */
  
  .box p:not(:first-child) {font-size: 16px;}
  /* box 클래스의 첫번째 자식을 제외한 모든 <p> 태그에 스타일링 적용 */  

  h1 {color: green;}
  h1:hover {color: red;}
  /* 기존에 초록색이던 h1 색상을 마우스 오버 시에만 red로 변경함 */
</style>