CSS로 특정 요소를 선택하는 방법 <선택자>

CSS 기본 문법은 선택자 { 속성1: 값1; 속성2: 값2; ... } 입니다.

HTML 문서에 여러 스타일을 적용하는데 CSS로 특정 요소를 선택하는 방법에 대해서 정리합니다.

 

참고로, jQuery에서는 $('요소')와 같은 방식으로 특정 HTML 태그를 선택할 수 있다. 자바스크립트에서는 getElementById('요소')의 방식으로 많이 사용된다. 함수의미는 get(가져오다) Element(요소) By(부터) Id(Identity:식별값) 정도로 해석할 수 있다.

 

CSS에서 선택자를 활용하기 위해 부모·자식, 형제 관계를 알아야 한다.

<p>부모
    <b>형</b>
    <i>제</i>
</p>

부모·자식은 어떤 태그 안에 다른 태그가 있는 관계로 <p>는 부모이고 <b>와 <i>는 자식이다.

형제는 같은 부모를 둔 태그로 <b> 바로 다음에 오는 형제는 <i>이다.

 

전체 선택자

전체 선택자는 *(별표)로 모든 HTML 요소들을 선택한다.

다른 선택자와 조합할 경우에는 *는 생략한다.

* {
    color: red;
}

모든 요소의 스타일을 빨간색으로 적용한다.

 

태그 선택자

태그 선택자는 TAG(태그이름)로 특정 태그의 HTML 요소들을 선택한다.

p {
    color: red;
}

<p> 태그 모든 요소의 스타일을 빨간색으로 적용한다.

 

아이디 선택자

아이디 선택자는 #ID로 특정 id 속성값의 HTML 요소(단일)를 선택한다.

#korea {
    color: red;
}

id 속성의 값이 korea인 요소의 스타일을 빨간색으로 적용한다.

 

클래스 선택자

클래스 선택자는 .CLASS로 특정 class 속성값의 HTML 요소들을 선택한다.

.korea {
    color: red;
}

class 속성의 값이 korea인 모든 요소의 스타일을 빨간색으로 적용한다.

 

클래스 선택자 앞에 아무것도 없다는 것은 전체 선택자 *가 생략되어 모든 요소를 선택한다.

태그 선택자, 아이디 선택자, 클래스 선택자를 조합하여 복합적으로 특정 요소를 선택할 수 있다.

p.korea {
    color: red;
}

class 속성의 값이 korea인 <p> 태그 모든 요소의 스타일을 빨간색으로 적용한다.

 

.CLASS.CLASS로 여러 개의 클래스를 가진 요소를 선택할 수 있다.

.korea.seoul {
    color: red;
}

class 속성의 값에 korea와 seoul 둘 다 가진 모든 요소의 스타일을 빨간색으로 적용한다.

클래스 선택자를 붙여쓰기 해야하고 띄어쓰기를 하면 아래 자식 선택자가 되기 때문에 주의해야 한다.

 

자식 선택자

자식 선택자는 선택자1 선택자2로 특정 부모 요소 안에 있는 특정 자식 요소들을 선택한다.

p b {
    color: red;
}

<p> 태그 부모 요소 안에 있는 <b> 태그 모든 자식 요소의 스타일을 빨간색으로 적용한다.

 

앞의 선택자가 부모 요소이고 뒤의 선택자가 자식 요소입니다.

태그 선택자, 아이디 선택자, 클래스 선택자를 여러 개의 선택자로 원하는데로 조합할 수 있다.

p .korea {
    color: red;
}
#korea .korea {
    color: red;
}

첫번째는 <p> 태그 요소 안에 있는 class 속성의 값이 korea인 모든 요소의 스타일을 빨간색으로 적용한다.

두번째는 id 속성의 값이 korea인 요소 안에 class 속성의 값이 korea인 모든 요소의 스타일을 빨간색으로 적용한다.

 

선택자1 > 선택자2로 특정 부모 요소 안에 특정 자식 요소 모두가 아닌 바로 아래의 자식 요소들을 선택한다.

p > b {
    color: red;
}

<p> 태그 요소 안에서 바로 아래에 있는 <b> 태그 모든 요소의 스타일을 빨간색으로 적용한다.

<p>
    <b>자식</b>
    <span>
        <b>자식의 자식</b>
    </span>
</p>

<p> 태그 요소 바로 아래 <b>자식</b> 요소에는 적용되고, <b>자식의 자식</b> 요소에는 적용되지 않는다.

 

형제 선택자

형제 선택자는 선택자1 ~ 선택자2로 특정 요소의 특정 형제 요소들을 선택한다.

p ~ b {
    color: red;
}

<p> 태그 요소의 <b> 태그 모든 형제 요소의 스타일을 빨간색으로 적용한다.

 

선택자1 + 선택자2로 모든 형제 요소가 아닌 바로 다음의 형제 요소(단일)를 선택한다.

p + b {
    color: red;
}

<p> 태그 요소의 바로 다음 <b> 태그 형제 요소의 스타일을 빨간색으로 적용한다.

 

속성 선택자

속성 선택자는 선택자[속성]으로 특정 속성을 가진 요소들을 선택한다.

p[title] {
    color: red;
}

title 속성을 가진 <p> 태그 모든 요소의 스타일을 빨간색으로 적용한다.

 

선택자[속성=값]으로 특정 속성이 특정 값인 요소들을 선택한다.

p[title=korea] {
    color: red;
}

title 속성의 값이 korea인 <p> 태그 모든 요소의 스타일을 빨간색으로 적용한다.

 

 

선택자[속성~=문자열]으로

 해당 속성의 값에 해당 문자열이 완전한 단어로 포함된 선택자의 요소들을 선택한다.

선택자[속성|=문자열]으로

 해당 속성의 값이 해당 문자열이거나 그 뒤에 하이픈(-)이 붙는 것으로 시작하는 선택자의 요소들을 선택한다.

선택자[속성*=문자열]으로

 해당 속성의 값에 해당 문자열이 포함되어 있는 선택자의 요소들을 선택한다.

선택자[속성^=문자열]으로

 해당 속성의 값이 해당 문자열로 시작하는 선택자의 요소를 선택한다.

선택자[속성$=문자열]으로

 해당 속성의 값이 해당 문자열로 끝나는 선택자의 요소를 선택한다.

 

적용 우선순위

CSS 스타일은 중복되어 적용될 수 있는데

기본적으로 나중에 적용되는 값이 이전에 적용된 값을 바꾼다.

 

하지만, 그보다 우선되는 아래의 우선순위에 따라 다르다.

1. 선택자의 속성값 뒤에 !important가 붙은 스타일
2. HTML 태그에서 style 속성에 직접 지정한 스타일
3. 아이디 선택자 #ID로 지정한 속성값 스타일
4. 클래스 선택자 .CLASS로 지정한 속성값 스타일
5. 태그 선택자로 지정한 속성값 스타일
6. 상위 요소에 지정된 속성값에 의해 상속된 스타일
7. 브라우저 기본 속성 스타일 (브라우저별/버전별로 약간의 차이가 있음)

우선순위가 같다면 개수가 많은 스타일이 우선순위가 높다.

 

중복으로 적용되거나 우선순위가 낮은 경우

원하는 스타일을 적용하기 위해 속성의 값 뒤에 !important를 붙여주면 됩니다.

p {
    color: red !important;
}
p {
    color: black;
}

검은색이 나중에 설정되었지만 !important로 설정된 속성에 의해 <p> 태그 모든 요소의 스타일을 빨간색으로 적용한다.

검은색도 !important로 설정된 속성이라면 우선순위가 같아서 나중에 설정된 속성으로 적용된다.

 

CSS로 특정 요소를 선택하는 방법 <가상선택자>