(CSS코딩일기) 선택자, 자식 결합자, 자손 결합자, 가상 클래스

1. 선택자

CSS 규칙에서 맨 앞에 적어 주는 걸 CSS 선택자라고 부릅니다. 선택자를 사용해서 이 규칙을 어떤 요소들에 적용할지 선택할 수 있습니다.

선택자 {
  선언;
  선언;
  선언;
}

2. 선택자 목록

콤마(,)로 선택자를 연결하면 여러 선택자에 같은 규칙을 적용할 수 있습ㄴ디ㅏ.

선택자1,
선택자2 {
 ...
}

3. 선택자 붙여 쓰기

여러 조건을 동시에 만족하는 요소를 선택하고 싶다면 선택자를 붙여서 쓸 수 있습니다. 예를 들어서 아래 HTML 코드에 있는 태그를 선택해 보겠습니다.

<h2 id="mongolia" class="large title">몽골 대자연으로 떠나는 여행</h2>

예시1. 아이디 + 클래스

#mongolia.title

예시2. 클래스 + 클래스

.large.title

예시3. 태그 + 아이디 + 클래스

h2#mongolia.large.title

4. 자식 결합자 (Child Combinator)

오른쪽 꺾쇠로 선택자를 이어 줍니다. 예를 들어서 아래 코드에서 tesla-y-2025.png를 보여주는 이미지 태그를 선택하려면 .article>img로 선택할 수 있습니다.

<div class="article">
  <img src="tesla-y-2025.png">
 ...
</div>

.article > img {
  width: 100%;
}

5. 자손 결합자 (Descendant Combinator)

스페이스(띄어쓰기)로 선택자를 이어 줍니다. 예를 들어서 아래 코드에서 tesla-w-2025.png를 보여주는 이미지 태그를 선택하려면 .article img로 선택할 수 있습니다.

<div class="article">
   <p> 이번에 리뷰해 볼 차량은 테슬라 모델 w 입니다.
      <img src="tesla-w-2025.png">
   </p>
  ...
</div>

6. 가상 클래스 (Pseudo-classs)

가상 클래스는 의사 클래스, 가짜 클래스라고도 부릅니다. 요소의 상태 같은 걸 선택할 때 사용하는 클래스입니다. 정해진 이름 앞에 콜론(:)을 붙여서 사용합니다. 대표적으로 :hover(마우스를 올렸을 때), :active(클릭한 상태) visited(방문한 적이 있는 링크), focus(포커싱 됐을 때) 등이 있습니다. 예를 들어서 밑줄이 없는 링크에 마우스를 올렸을 때 밑줄이 생기도록 하려면 :hover를 활용하면 됩니다.

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

7. 전체 선택자 (Universal Selector)

* 라는 선택자는 모든 요소를 선택하는 선택자입니다.

1) 모든 요소를 선택하기

* {
  box-sizing: border-box;
}

2) .gallery의 모든 자식 요소 선택하기

.gallery>*{
  width: 120px;
  height: 90px;
}

8. n번째 자식 선택자(n-th child Selector)

:nth-child()를 사용합니다. 괄호 안에는 숫자나 even, odd, 2n 같은 값이 들어갈 수 있습니다. 1부터 시작합니다. (첫번째 자식은 1이고, 세번째 자식은3)

1) .gallery의 세 번째 자식

.gallery :nth-child(3) {...}

2) .gallery의 짝수 번째 자식

.gallery :nth-child(even) {...}

.gallery :nth-child(2n) {...}

3) .gallery의 홀수 번째 자식

.gallery :nth-child(odd) {...}

.gallery :nth-child(2n+1) {...}

4) 첫번째 자식, 마지막 자식

.gallery :first-child {...}

.gallery :last-child {...}

9.  모든 곳에서 border-box를 쓰고 싶을 떄

박스 모델의 크기는 기본적으로 콘텐트(content-box)를 기준으로 정해집니다. 모든 요소의 크기를 테두리 (border-box)를 기준으로 하고 싶다면, 아래처럼 추가하고 쓰면 됩니다. 항상 이 코드를 추가하는 것도 좋습니다.

* {
  box-sizing: border-box;
}