CSS 선택자

개요. 

CSS를 작성할 때 선택자는 당연히 땔 수 없는 관계이다. 

 

하지만 class, id, 자식 선택자 정도는 쉽게 사용하는데 그 이후부터는 항상 찾아봐야 하는 불편함이 있어서 

이참에 공부 겸 정리를 하려고 한다. 

 

태그 선택자.

해당하는 태그 전체에게 스타일을 주는 선택자이다. 

<div>
  <p>
    안녕하세요.
  </p>
</div>

 

div 태그에게 분홍색 배경을 넣어주고 p 태그에게 폰트 크기를 15px로 설정해주고 싶다면 어떻게 해야할까? 

div {
  background-color: pink;
}

p {
  font-size: 15px;
}

 

태그명을 바로 선택해주면 적용이 가능하다. 

css 파일에서 태그명 { } 을 통해서 사용이 가능한 방식

 

id 선택자.

특정 id에게만 스타일을 줄 수 있는 선택자이다. 

id는 한 페이지에 하나만 존재할 수 있으므로 하나의 요소만 스타일이 변경된다고 생각하면 된다. 

<div>
  <p>
    안녕하세요.
  </p>
  
  <p id="second">
    안녕하세요.
  </p>
  
  <p>
    안녕하세요.
  </p>
</div>

 

가운데에 있는 second 라는 id를 가진 p 태그에게만 폰트 크기를 15px 주기 위해서는 id 선택자를 사용하면 된다. 

#second {
  font-size: 15px;
}

 

id 앞에 #을 넣어주면 바로 사용할 수 있다. 이렇게 사용하면 second 위 아래에 있는 p 태그에는 스타일이 들어가지 않고 

가운데에 있는 second라는 id를 가진 p 태그만 폰트 크기가 변경된다. 

 

css 파일에서 #id명 { } 을 통해서 사용이 가능한 방식

 

class 선택자. 

특정 class를 가진 모든 요소에게 스타일을 줄 수 있는 선택자이다. 

<div>
  <p class="other">
    안녕하세요.
  </p>
  
  <p id="second">
    안녕하세요.
  </p>
  
  <p class="other">
    안녕하세요.
  </p>
</div>

 

id 선택자의 경우와 반대로 second 라는 id를 가지고 있지 않은 p 태그들에게 폰트 크기를 15px을 주기 위해서 

class 선택자를 사용할 수 있다. 

.other {
  font-size: 15px;
}

 

class 명칭 앞에 . 을 붙여서 사용할 수 있다. 가운데 있는 second 요소 외에 다른 p 태그의 폰트 크기가 변경된다. 

 

css 파일에서 .class { } 를 통해서 사용이 가능한 방식

 

선택자 연결. 

기본 선택자들을 여러개 연결해서 사용할 수 있는데, 선택자 사이의 공백 유무에 따라 자손 선택자와 다중 선택자로 

나뉘게 된다. 

 

자손 선택자. 

<div>
  <div> 
    <p class="other">
      안녕하세요.
    </p>
  </div>
  
  <p class="other">
    안녕하세요.
  </p>
</div>

 

p 태그 중 div 안에 있는 p 태그에게만 스타일을 주려면 어떻게 해야할까? 

이때 자손 선택자를 사용해서 특정 요소에게 스타일을 줄 수 있다. 

div div .other {
  font-size: 15px;
}

 

기본 선택자를 연속으로 사용할 때 공백을 사용하면 단계별로 자식 요소 중에서 찾게 된다. 

div => div => p 태그에 있는 요소에게만 스타일을 줄 수 있는 것이다. 

 

css 파일에서 선택자1 선택자2 ... { } 방식으로 사용이 가능한 방식

 

다중 선택자. 

<div>
  <h1 class="other">
      안녕하세요.
  </h1>
  
  <p class="other">
    안녕하세요.
  </p>  
  
  <h1>
    안녕하세요.
  </h1>
</div>

 

other 클래스를 가지고 있는 요소 중 h1 태그에게만 폰트 크기를 변경해주고 싶다면 어떻게 해야할까? 

다중 선택자를 통해서 특정 요소에게 스타일을 줄 수 있다. 

h1.other {
  font-size: 15px;
}

 

기본 선택자를 공백 없이 사용하면 모든 요소를 가지고 있는 요소 중에서 찾게 된다. 

h1 요소 중에 other 클래스를 가지고 있는 요소에게만 스타일을 줄 수 있다. 

 

css 파일에서 선택자1선택자2 { } 방식으로 사용이 가능한 방식

 

형제 요소 선택자.

<div class="container">
 <p class="text">나는 text입니다.</p>
 <span>나는 span입니다.</span>
 <span>나는 span입니다.</span>
 <p>나는 p입니다.</p>
 <p>나는 p입니다.</p>
</div>
<span>나는 span입니다.</span>

 

container 안에 있는 span 요소에서만 스타일을 주려면 어떻게 해야할까? 

먼저 앞서 배운 자손 선택자를 활용하면 선택할 수 있을 것이다. 이때 형제 요소 선택자를 활용해서 스타일을 줄 수 있다. 

.text ~ span {
  background: red;
}

 

형제 요소 선택자를 사용하면 해당 요소와 같은 부모를 가지고 있는 형제 요소 중 선택한 요소를 모두 선택한다. 

text 클래스와 같은 부모를 가지고 있는 형제 요소 중 span을 선택해서 배경색을 주었다. 

 

css 사용 방식으로는 선택자1 ~ 선택자2 { } 방식으로 사용이 가능한 방식

 

전체 선택자.

<div>
  <p>안녕하세요</p>
  <div>
    <p>안녕하세요</p>
  </div>
  
  <h1>안녕하세요</h1>
  
  <h2>안녕하세요</h2>
</div>

 

모드 태그들에게 전부 폰트 크기를 변경해주고 싶다면 어떻게 해야할까?

전체 태그를 하나하나 다 폰트 크기를 줘야할까? 아니다 전체 선택자를 통해서 모든 요소에게 스타일을 줄 수 있다. 

* {
  font-size: 15px;
}

 

모든 요소를 선택할 수 있는 선택자이다. 

 

css 파일에서 * { } 방식으로 사용

 

그룹 선택자. 

<div>
  <p>안녕하세요</p>
  <div>
    <p>안녕하세요</p>
  </div>
  
  <h1>안녕하세요</h1>
  
  <h2>안녕하세요</h2>
</div>

 

이번엔 모든 p 태그와 모든 h1 태그에게 15px을 주려면 어떻게 해야할까? 

각각의 태그 선택자에게 각각 15px을 주는 방법을 사용해야 할까? 이때 그룹 선택자를 사용하면 여러 선택자를 

그룹으로 묶어서 스타일을 줄 수 있다. 

p {
  font-size: 15px;
}

h1 {
  font-size: 15px;
}

==>> 

p, h1 {
  font-size: 15px;
}

 

선택자를 사용해서 중복된 속성을 반복해서 주는 경우, 코드가 길어질 수 있는데 그룹 선택자를 사용하면 

한번에 처리가 가능해서 코드를 줄여주는 역할을 한다. 

 

위 코드와 아래 코드 중 일반적으론 아래쪽 코드가 더 깔끔하고 가독성이 좋다고 느낄 것이다. 

 

css 파일에서 선택자1, 선택자2 { } 방식으로 사용

 

가상 클래스 선택자.

선택자 뒤에 :가상 이벤트 를 붙이면 특정 이벤트마다 스타일을 설정할 수 있다. 

이것을 가상 클래스라고 한다. 

 

가상 클래스는 종류가 많은데, 몇가지 알아보자면 

:first-child 

첫 번째 형제를 선택한다는 뜻이다. 이게 정말 헷갈리는데, 

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
</div>

 

다음과 같은 요소가 있을 때 첫 번째 p 태그를 가상 선택자를 사용해서 스타일을 주려면 어떻게 해야할까? 

div:first-child {        // <== X  
  font-size: 15px;       // <== X  
}                        // <== X

p:first-child {          // <== O
  font-size: 15px;       // <== O
}                        // <== O

 

div 태그에게 first-child를 주는 것이 아닌 p 태그에게 first-child를 줘서 스타일을 줄 수 있다. 

child 라는 단어 때문에 부모 요소에게 줘야하는 것이 아닌가 생각되지만 아니고 형제 요소를 통해서 줘야한다. 

:last-child 

마지막 형제를 선택한다는 뜻이다. 기본적으로 사용 방식은 first-child와 동일하다. 

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
</div>

// 
p:last-child {
  font-size: 15px;
}

 

마지막 p 태그에게 폰트 크기가 적용된다. 

:nth-child(n)

first와 last 만 있는 것이 아닌 특정 형제 요소도 선택할 때 사용하는 선택자이다. 

여기서 (n)은 필요에 따라 수식을 변경할 수 있다. 

 

짝수 번째의 요소를 모두 선택하기 위해서는 

p:nth-child(2n) {
  font-size: 15px;
}

 

n 대신 2n을 사용하면 선택이 가능하고 반대로 홀수 번째를 선택하기 위해서는 

p:nth-child(2n-1) {
  font-size: 15px;
}

 

방식으로 사용할 수 있다. 

:first-of-type

<div class="container">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

 

:first-child를 사용할 때 공부했던 태그이다. 여기서 첫번째 p 태그에게만 스타일을 주려면 어떻게 해야했을까?

p:first-child 를 통해서 첫 번째 요소를 선택했을 것이다. 이때 첫 번째 p 태그가 p 태그가 아닌 h1 태그라면 어떻게 될까? 

<div class="container">
  <h1>1</h1>
  <p>2</p>
  <p>3</p>
</div>

 

container 의 모든 자식 요소들은 h1이 첫 번째 요소이기 때문에 first-child는 h1만 사용할 수 있다. 

그 외 p 태그의 first-child 속성을 줬을 때 첫 번째 자식은 h1이기 때문에 p태그는 포함하지 않아서 아무런 변화가 없다. 

 

하지만 현제 요소 중에 자신과 동일한 유형의 요소를 선택하기 위해선 어떻게 해야할까? 

이때 사용하는 것이 first-of-type이다. 

 

형제 요소 중 자신의 유형과 일치하는 첫 요소를 선택한다. 

즉, first-child는 모든 형제 요소 중 첫 요소라면 first-of-type은 지정한 것과 같은 요소의 형제 중 첫 요소이다. 

<div class="container">
	<h1>이렇게</h1>
	<p>자식이 있다면?</p>  // <-- background: red 스타일 적용 
	<p>이번엔</p>
	<h2>다른걸</h2>
	<p>해볼거야</p>
</div>

.container p:first-of-type {
    background: red;
}

.container p:first-child {
    background: blue;
}

 

:nth-of-type(n)

nth-child의 first-of-type 버전이라고 생각하면 된다. 

형제 요소 중 자신과 유형이 일치하는 [n] 요소를 선택하는 속성이다. 

<div class="container">
	<h1>이렇게</h1>
	<p>자식이 있다면?</p>  
	<p>이번엔</p>           // <-- background: red 스타일 적용 
	<h2>다른걸</h2>
	<p>해볼거야</p>
</div>

.container p:nth-of-type(2) {
    background: red;
}

 

n 안에는 숫자 뿐만 아니라 복잡한 수식 등도 들어갈 수 있다. 

:last-of-type

last-child의 first-of-type 버전이다. 

형제 요소 중 자신과 유형이 일치하는 마지막 요소를 선택하는 속성이다. 

<div class="container">
  <h1>이렇게</h1>
  <p>자식이 있다면?</p>  
  <p>이번엔</p>           
  <h2>다른걸</h2>
  <p>해볼거야</p>          // <-- background: red 스타일 적용 
</div>

.container p:last-of-type {
  background: red;
}

 

:hover 

마우스를 호버했을 때의 스타일을 줄 때 사용하는 선택자이다. 

특정 요소를 마우스로 위에 올렸을 때 스타일이 변경된다. 

button:hover { 
  background: red;
}

 

:active

활성화된 요소를 선택하는 가상 클래스 선택자이다. 

※ 활성화 된 요소란 버튼 등을 클릭해서 요소의 동작이 활성화 되어 있는 상태를 뜻한다. 

button:active { 
  background: red;
}

 

:focus

focus를 받고 있는 입력창들의 요소를 선택하는 가상 클래스 선택자이다. 

※  focus를 받고 있는 요소란 입력창의 커서가 활성화 되어있는 요소를 뜻한다.

input:focus { 
  background: red;
}

 

:visited

사용자가 방문한 적 있는 링크를 선택하는 가상 클래스 선택자이다. 

※ 방문한 적 있는 링크란 말 그대로 링클르 눌러 해당 경로를 방문한 기록이 브라우저 상에 남아있는 링크를 말합니다.

방문한 적 있는 경우 기본적으로 보라색으로 표시된다. 

a:visited {
  color: red;
}

 

가상 요소 선택자

가상 클래스 선택자와 비슷한 명칭의 가상 요소 선택자가 있다. 

실제로 html 요소를 수정하는 것이 아닌 css로 가상 요소를 추가해 선택할 수 있다. 

 

즉, html을 사용하지 않고 css를 통해서 새로운 요소를 만들 수 있다.

 

:before, :after 

<head>
 <style>
    .box1 {
      width: 100%;
      height: 500px;
      background-color: red;
    }

    .text {
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="box1">
    나는 박스1입니다.
    <p class="text">나는 박스2입니다.</p>
  </div>
</body>

 

끔찍한 UI지만 div와 p 태그를 사용해서 위와 같이 만들 수 있는 것을 가상 요소 선택자를 사용하면 간단하게 작성할 수

있다. 

 

<head>
 <style>
    .box1 {
      width: 100%;
      height: 500px;
      background-color: red;
    }

    .box1:after {
      content: "나는 박스2입니다.";
      display: block;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="box1">
    나는 박스1입니다.
  </div>
</body>

 

가상 선택자를 사용하면 HTML 코드를 줄여줄 수 있다. 

 

이때, 가상 요소 선택자를 사용하는 경우 주의할 점이 존재한다. content 속성이다. 

가상 요소란 말 그대로 [ 가상으로 ] 만들어준 요소이므로 본질적으로 html 상에서는 존재하지 않는다. 

따라서 content 속성을 이용해서 인위적으로 요소 내에 들어갈 내용을 작서해야 한다. 

 

content 속성이 없다면 해당 가상요소는 화면에 그려지지 않는다. 

내용이 필요 없다면 "" 를 사용해서라도 content 속성은 반드시 필요하다. 

 

가상 요소 선택자의 사용 예시 

오늘의 집 메인 페이지

 

헤더 메뉴 아래에 Active를 나타내기 위해서 라인이 생기는 UI가 많은데, 오늘의 집에서는 이런 요소를 after로 만들어주고 있다. 

 

외에도 슬라이드 요소의 좌우 이미지 변경 버튼의 경우 가상 요소 선택자를 활용하는 경우 등이 있다.