CSS 선택자 선택하는 방법 - 태그, 아이디, 클래스, 속성

CSS 선택자를 이용해서 애널리틱스, 구글 태그매니저 등에서
웹페이지 내의 특정 위치를 지정해야 하는 경우들이 있다.

자주 쓰는 CSS 선택자들을 알아보자 

1. 태그 이름

특정 태그 전체를 선택하려면 태그 이름을 사용한다.

 

CSS 선택자	의미
li	모든 li 태그  <li>
p	모든 p 태그  <p>

 

2. 아이디

특정 아이디의 태그를 선택하려면, 아이디 앞에 #을 붙인다

 

CSS 선택자	의미
#search	아이디가 search인 태그  <id=search>
#top_menu	아이디가 top_menu인 태그  <id=top_menu>

 

3. 클래스

특정 클래스의 태그를 선택하려면, 클래스 앞에 . 을 붙인다

 

CSS 선택자	의미
.pr	클래스가 pr인 태그 <class=pr>
.hd	클래스가 hd인 태그 <class=hd>

 

4. 속성

속성의 이름과 값으로 태그를 선택하려면, [name="value"] 형식으로 적는다

 

CSS 선택자	의미
[alt="message icon"]	alt 속성의 값이 "message icon"인 태그
[href="https://devfairy.tistory.com/"]	href 속성의 값이 "https://devfairy.tistory.com/"인 태그

 

 

 

 

 CSS 선택자 여러개를 조합해서 사용하는 방법

1. OR 연산

쉼표 (,)를 활용하면 OR 연산이 된다. 두 CSS 선택자 중 하나라도 해당되면 선택한다.

 

CSS 선택자	의미
#login, .left	아이디가 login이거나 클래스가 left인 태그
p, i	모든 p 태그와 모든 i태그

 

2. AND 연산

두 CSS 선택자를 붙여쓰면 AND 연산이 된다. 두 CSS 선택자에 모두 해당되는 요소만 선택한다.

 

CSS 선택자	의미
.favorite.private	favorite 클래스와 private 클래스를 모두 가진 태그
p.favorite	favorite 클래스를 가진 p 태그

 

3. 중첩된 요소

중첩된 태그를 선택하려면, 두 CSS 선택자를 띄어쓰면 된다.
첫 번째 CSS 선택자로 선택된 태그 내부에서, 두 번째 CSS 선택자를 찾는다.

 

CSS 선택자	의미
.favorite .private	favorite 클래스를 가진 태그에 중첩된, private 클래스를 가진 태그
p .favorite	p 태그 아래에 중첩된, favorite 클래스를 가진 태그

 

 

 

 

 

 

예시  

 

/* 모든 <h1> 태그 */
h1 {
  color: orange;
}


/* 'important'라는 클래스를 갖고 있는 모든 태그 */
.important {
  color: orange;
}


/* 'favorite'라는 아이디를 갖고 있는 태그 */
#favorite {
  color: blue;
}

 

 

 

 

/* 'div1' 클래스를 갖고 있는 요소의 자식 중 모든 <i> 태그 */
.div1 i {
  color: orange;
}



/* 'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 <i> 태그 */
.div1 > i {
  color: orange;
}

 

 

 

 

 

/* 'two' 클래스를 가지고 있는 태그 모두와 'four' 클래스를 가지고 있는 태그 모두 선택 */
.two, .four {
  color: orange;
}


/* 'outside' 클래스를 갖고 있으면서 'one' 클래스도 갖고 있는 태그 */
.outside.one {
  color: blue;
}


/* 'inside' 클래스를 갖고 있으면서 'two' 클래스도 갖고 있는 태그 */
.inside.two {
  color: orange;
}

 

 

 

 

 

n번째 자식 태그 가져오기

 

/*Pseudo-class (가상 클래스)
콜론(:)을 사용하면 몇 가지 '가상 클래스'를 선택할 수 있다*/

/*n번째 자식*/


/* .div1의 자식인 <p> 태그 중 3번째 */
.div1 p:nth-child(3) {
  color: blue;
}

/* .div1의 자식인 <p> 태그 중 첫 번째 */
.div1 p:first-child {
  color: red;
}

/* .div1의 자식인 <p> 태그 중 마지막 */
.div1 p:last-child {
  color: green;
}

/* .div1의 자식 중 마지막 자식이 아닌 <p> 태그 */
.div1 p:not(:last-child) {
  font-size: 150%;
}

/* .div1의 자식 중 첫 번째 자식이 아닌 <p> 태그 */
.div1 p:not(:first-child) {
  text-decoration: line-through;
}

 

 

 

 

마우스 오버

 

 

/*마우스 오버 (hover)*/

h1 {
  color: orange;
}

/* 마우스가 <h1> 태그에 올라갔을 때 */
h1:hover {
  color: green;
}