CSS 선택자

CSS 를 입힐 때, HTML 태그 선택자에 대해 헷갈려 정리합니다.

다른 분들이 정리해둔 내용을 참고했습니다. 감사합니다.

 

* 선택자

: 모든 태그를 선택하는 선택자입니다.

* {
	/* css code */
}

 

Tag 선택자

: 주어진 이름의 태그를 선택하는 선택자입니다.

header {
	/* css code */
}

div {
	/* css code */
}

 

동일 태그의 속성은 띄어쓰기 없이 같이 선택자로 사용할 수 있습니다.

div#name.title.abcde {
	/* 태그, id, class는 여러개를 함께 사용할 수 있습니다. */
}

 

Class 선택자

: 주어진 이름의 클래스를 선택하는 선택자입니다. 온점(.)을 붙여 클래스임을 구분합니다.

.name {
	/* css code */
}

 

id 선택자

: 주어진 이름의 아이디를 선택하는 선택자입니다. 샾(#)을 붙여 아이디임을 구분합니다.

#id {
	/* css code */
}

 

속성 선택자

: 태그에 붙은 속성을 선택할 수도 있습니다.

<a href="http://www.google.com">text</a>
<input input="password">

a[href="http://www.google.com"] {
	/* css code */
}
input[type="password"] {
	/* css code */
}

 

의사 클래스 혹은 가상 클래스 선택자

: 실제 요소에 붙은 클래스명은 아니지만 특정 조건에서 마치 그 클래스가 붙어있는 것처럼 사용하는 선택자입니다. 사용 가능한 의사 클래스가 정해져 있습니다. 콜론(:)을 붙여 사용합니다.

a:link {
	/* 방문하지 안은 a 태그 */
}
a:visited {
	/* 방문한 a 태그 */
}
div:hover {
	/* 커서가 올라가 있는 div 태그 */
}
input:focus {
	/* 포커싱 된 input 태그 */
}
button:active {
	/* 활성화된 button 태그 */
}

 

다른 의사 클래스들에 대해서는 아래 링크를 참조합시다.

MDN 의사클래스

의사 클래스 - CSS: Cascading Style Sheets | MDN

 

 

구조 선택자

: DOM Tree 구조상 요소가 어디에 위치했는지에 따라 적용되는 선택자입니다.

:root {
	/*DOM tree의 root 요소를 가리킵니다. HTML이면 html 태그를 가리킵니다. */
	/*보통 전역 CSS 변수를 저장할때 사용되는데 이건 다른 글에서 다루겠습니다.*/
}
:empty {
	/*요소 중 자식이 없는 요소를 가리킵니다.(안에 아무 요소도 없음) */
}

 

See the Pen Untitled by dev (@dev2820) on CodePen.

 

아래 선택자들도 자주 사용하는 선택자들입니다.

:nth-child() {
	/* ()안에 들어있는 수식을 기반으로 요소를 선택합니다. */
	/* p:nth-child(2)이면 2번째 자식인 p를 선택합니다. */
	/* ()안에는 3n+2와 같은 간단한 수식을 넣을 수 있습니다. */
	/* ()안에 odd를 쓰면 홀수, even은 짝수를 선택합니다. */
	/*  sibling 중 type이 다른 요소들도 함께 셉니다. */
}
:nth-last-child() {
	/* nth-child와 같은데 뒤에서부터 셉니다. 즉, 뒤에서 n번째 자식인 대상을 선택합니다. */
}
:first-child {
	/* 첫번째 자식 요소를 선택합니다. */
}
:last-child {
	/* 마지막 자식 요소를 선택합니다. */
}
:nth-of-type() {
	/* :nth-child()처럼 ()안에 선택자를 집어넣어서 씁니다. */
	/*  sibling 중 type이 다른 요소들은 세지 않습니다. */
}

See the Pen Untitled by dev (@dev2820) on CodePen.

 

부정 선택자

: 부정 선택자는 해당 요소가 아닌 요소를 선택합니다. :not()을 사용합니다.

h1:not(.name) {
	/* h1 태그 중 .name 클래스가 붙지 않은 태그를 선택합니다. */
}

 

가상 요소

: 실제 존재하지 않는 요소를 만들어줍니다. 자주 사용하는 문법이니 기억합시다.

 

:after

p::after {
	/* 해당 태그 오른쪽에 추가할 내용을 선택합니다. */
	/* content 속성을 통해 내용을 적을 수 있습니다. content는 필수입니다. */
	content : "abcde"
}

 

::before

p::before {
	/* 해당 태그 왼쪽에 추가할 내용을 선택합니다. */
	/* content 속성을 통해 내용을 적을 수 있습니다. content는 필수입니다. */
	content : "abcde"
}

 

::selection

p::selection {
	/* 드래그했을 때의 영역을 선택합니다. */
	/* 드래그했을 때, 적용되는 css를 입력합니다. */
}

 

CSS 결합자

: 선택자 간의 관계로 선택자를 정의할 수 있습니다.

자식 결합자

: 선택자 요소의 자식 요소 (바로 아래 자식) 를 선택하는 선택자입니다.

<ul class="list">
	<li class="a">a</li>
	<li class="b">b</li>
</ul>

ul.list > li {
	/* 클래스명이 list인 ul 태그의 자식 요소인 모든 li를 선택합니다. */
}

 

하위 결합자

: 선택자 요소의 하위 요소 (아래 모든 요소) 를 선택하는 선택자입니다.

<ul class="list">
	<li class="a">a</li>
	<li class="b">b</li>
	<ul>
		<li class="c">c</li>
	</ul>
</ul>

ul.list li {
	/* 클래스명이 list인 ul 태그의 하위 요소인 모든 li를 선택합니다. */
}

 

인접 형제 결합자

: 해당 요소의 형제 요소(sibling) 중 바로 옆(아래)요소 선택하는 선택자입니다.

<ul class="list">
	<li class="a">a</li>
	<li class="b">b</li>
</ul>

li.a + li {
	/* 클래스명이 a인 li 태그의 바로 옆(아래) 요소 */
}

 

일반 형제 결합자

: 해당 요소의 모든 형제 요소(sibling) 를 선택하는 선택자입니다.

<ul class="list">
	<li class="a">a</li>
	<li class="b">b</li>
    <p>test</p>
	<li class="c">c</li>
	<li class="d">d</li>
</ul>

li.b ~ li {
	/* 클래스명이 b인 li 태그 아래(다음) 모든 sibling li 태그 요소 */
}