HTML & CSS - [CSS] 선택자(Selectors), 원하는 요소를 선택하자

서론

HTML의 요소들의 스타일을 제어할 수 있는 CSS를 사용하려면 HTML의 원하는 요소와 범위를 정확하게 선택할 수 있어야 합니다.

CSS문법에서는 원하는 요소를 선택할 수 있도록 다양한 방법을 제공하고 있습니다.

본문에서는 이런 요소를 선택하는 다양한 방법에 대해서 알아보도록 하겠습니다.

 

선택자(Selectors)와 종류

선택자는 요소를 선택하는 문법적인 방법을 일컫는 말입니다.

4개의 큰 분류로 나누어 구분할 수 있습니다.

• 기본 선택자(Basic selectors) - 기본적인 선택자의 표현
• 그룹 선택자(Grouping selectors) - 다수의 요소를 선택하는 선택자의 표현
• 결합 선택자(Combinator selectors) - 요소와 인접하는 형제 또는 자식 요소들을 선택하는 선택자의 표현
• 의사 클래스 또는 의사 요소 (Pseudo classes or Pseudo elements)

종류는 크게 중요하지 않습니다. 각각의 표현 방법을 잘 숙지해두세요.

 

기본선택자(Basic selectors)

기본선택자는 기본적이고 가장 대중적으로 요소들을 선택하는 방법을 말합니다. 

종류	기능	표현방법
전체 선택자 (Universal selector)	모든 요소를 선택 (Namespace 제한가능)	*
유형 선택자 (Type selector)	요소의 이름으로 선택 (태그 이름)	elementname
클래스 선택자 (Class selector)	요소의 클래스명으로 선택	.classname
ID 선택자 (ID selector)	요소의 아이디명으로 선택	#idname
속성 선택자 (Attribute selector)	해당 특성을 포함한 요소를 선택	[attr] , [attr=value]

 

전체 선택자 (Universal selector)

CSS를 이용하다 보면 문서 전체의 요소들을 선택하여 제어하고 싶을 때 사용합니다.

보통 CSS를 이용하여 디자인하기 위한 초기화 과정에서 많이 사용하곤 합니다.

*{
    margin: 0px;
    padding: 0px;
    border: 0px;
}

 

유형 선택자 (Type selector)

태그명을 가지고 요소를 선택합니다.

즉 CSS 적용되는 HTML의 모든 동일한 태그명을 선택하는 선택자입니다.

전체 문서에서 특정 태그명을 가진 요소들을 전부 제어할 때 주로 사용됩니다.

/*태그명으로 요소 선택*/
h1{
    background-color: black;
}
h2{
    background-color: blue;
}

클래스 선택자 (Class selector)

동일한 클래스명을 가진 요소들을 선택하는 선택자입니다. 

DOT(. ) 클래스명으로 선택합니다. (클래스 명은 중복될 수 있습니다.)

/* classname이 'article'이라는 요소에 접근할 때 */
.article{
    /*원하는 스타일 적용*/
}

ID 선택자 (ID selector)

동일한 ID를 가진 요소들을 선택하는 선택자입니다.

#ID명으로 선택합니다.(ID명은 중복되지 않습니다.)

/* ID값이 'mastertable'이라는 요소에 접근 할 때*/
#mastertable{
    /*원하는 스타일 적용*/
}

속성 선택자 (Attribute selector)

요소(태그)들에서는 속성과 값들이 존재합니다. 

해당 선택자는 속성과 값들의 포함, 일치, 만족 등을 확인하여 요소를 선택합니다. (더 자세한 내용은 여기)

/*해당 속성이 존재하는 경우*/
[attribute]{

}
/*해당 속성과 값이 일치하는 경우*/
[attribute = value]{

}

 

 

그룹 선택자(Grouping selectors)

거창하게 그룹 선택 자라고 구분 지었지만 사실 여러 요소를 한 번에 선택하기 위한 방법입니다.

예를 들어

class명이 article인 요소들과 h2 태그명을 가진 요소들을 한 번에 선택하고 싶은 경우 이 그룹 선택자의 표현을 사용합니다. 쉼표( , )를 이용하여 표현할 수 있습니다.

/*그룹 선택자*/
.article, h2{
    /*원하는 스타일 적용*/
}

 

결합 선택자 (Combinator selectors)

결합 선택자는 하나이상의 선택자를 선택하고, 관계를 가지는 선택자입니다.

즉, 특정 조건을 가지는 선택자입니다. 특정 선택 요소의 자식, 형제 요소들을 제어하기에 효과적입니다.

CSS 선택자는 부모 요소 쪽으로 접근하는 선택자는 제공하지 않습니다.

 

종류	기능	표현 방법
자손 결합자 (Descendant combinator)	좌측 요소를 기준으로 하위 모든 요소들을 선택한다.	공백으로 표현
자식 결합자 (Child combinator)	좌측 요소를 기준으로 바로 아래 자식요소를 선택한다.	>
일반 형제 결합자 (General sibling combinator)	좌측 요소와 부모가 같고 좌측 요소 뒤에부터 있는 모든 요소를 선택한다.	~
인접 형제 결합자 (Adjacent sibling combinator)	좌측 요소와 부모가 같고 좌측 요소 바로 뒤에 있는 요소를 선택한다.	+
열 결합자 (Column combinator)	같은 열에 있는 요소를 선택한다.	||

자손 결합(Descendant combinator)

자손 결합은 A요소의 하위 요소 중 모든 B 요소를 선택하라는 의미의 선택자입니다.

즉, 어떤 요소로 범위를 지정한 후 그 안에서 모든 요소를 선택할 수 있습니다.

공백으로 표현하며 자주 사용하는 결합 선택자입니다.

/* article클래스에서 모든 h1태그를 선택해라 /*
.article h1{
	//...
}
/* article클래스에서 모든 h1,h2,h3태그를 선택해라 /*
.article h1,h2,h3{
	/*...*/
}

자식 결합 (Child combinator)

자손 결합은 어떤 요소로 범위를 지정한 후 그 안에서 한 단계 아래의 하위 태그만 선택하는 선택자입니다.

예를 들어 다음과 같은 HTML요소들이 존재한다고 가정합시다.

<div class='main'>
 <h1>메인 제목</h1>
 <div class='article'>
 	<h1>본문 제목</h1>
 </div>
</div>

이때 main클래스 요소 안에 h1(메인 제목)의 요소만을 선택하고 싶다면 자식 결합을 이용하면 됩니다.

/* 자식 결합*/
.main > h1{
	/*......*/
}

일반 형제 결합(General sibling combinator)

일반 형제 결합은 좌측 요소와 같은 부모 안의 모든 요소를 선택합니다.

예를 들어 다음과 같은 HTML 요소가 존재한다고 가정합시다.

<div class='article'>
 	<h1>본문 제목</h1>
    <p>본문내용1</p>
    <p>본문내용2</p>
</div>

위와 같을 때 일반 형제 결합으로 모든 p요소를 선택할 수 있습니다.

/*일반 형제 결합*/
h1 ~ p{
	/*...*/
}

인접 형제 결합 (Adjacent sibling combinator)

인접 형제 결합은 일반형제 결합과 유사하지만 만나는 바로 첫 번째 요소만을 선택합니다.

/*인접 형제 결합*/
h1 + p{
	/*...*/
}

본문 내용1만 선택됩니다. 

위와 같이 사용해서 첫 번째 단락만 들여 쓰기를 하는 경우 용의 합니다.

 

의사 클래스 또는 의사 요소 (Pseudo classes or Pseudo elements)

의사 클래스와 의사 요소는 추상적인 개념을 선택할 수 있도록 설계된 선택자입니다.

요소로 존재하지는 않지만 필요한 개념들을  선택할 수 있도록 도와줍니다.

 

예를 들어, 마우를 올려두는 동작이라던지, 이미 방문했던 링크라던지, 특정 요소의 첫 번째 글자, 첫 줄 등 이런 추상적인 개념을 선택할 수 있게 해 줍니다.

 

사전적 정의를 살펴보면 다음과 같습니다.

종류	기능	표현 방법
의사 클래스 (Pseudo classes)	상태 정보에 대한 선택자 - 동작,행위 예) 방문여부, 마우스 위치여부등	:
의사 요소 (Pseudo elements)	요소의 추상적 개념에 대한 선택자 예)요소의 첫글자,첫줄 등등	::

의사 클래스와 의사 요소는 추상적인 개념을 선택하는 것이기 때문에 각각의 이름이 정의되어있습니다.

각각의 자주 사용하는 이름만을 살펴보도록 하겠습니다. 예제는 의사 클래스 , 의사 요소에서 확인하세요)

 

의사 클래스 (Pseudo classes)

이름	설명
:link	사용자가 방문하지 않은 링크를 선택
:visited	사용자가 방문했던 링크를 선택
:hover	마우스 커서가 링크위에 올라와 있는 요소를 선택
:nth-child(n)	n번째 위치에 있는 자식 요소를 선택
:focus	활성화된 input 요소를 선택
:checked	체크된 상태의 input 요소를 선택

의사 요소 (Pseudo elements)

이름	설명
::before	특정 요소의 시작부분에 콘텐츠를 추가한다.
::after	특정 요소의 끝부분에 콘텐츠를 추가한다.
::first-line	요소의 텍스트 첫 줄을 선택한다.
::first-letter	요소의 첫 글자를 선택한다.

 

의사 클래스와 의사 요소는 다른 포스트에서 조금 더 집중적으로 다뤄보도록 하겠습니다.