[html, css] 자주 쓰는 css 선택자(selector)

[html, css] 자주 쓰는 css 선택자(selector)

[html, css] box model

[html, css] position - relative, absolute, fixed

[html, css] flex - 반응형으로 정렬하기

[html, css] margin: auto - 가운데정렬, 푸터, 헤더, 양 옆에 붙는 내비게이션

 

내가 자주 쓰고 자주 봤던 css 선택자들을 정리해보았다.

* 알아둬야 할 개념
- 부모요소 : 한 단계 위에 있는 요소
- 자식요소 : 한 단계 아래에 있는 모든 요소
- 하위요소 : 아래에 있는 모든 요소
- 형제요소 : 같은 부모를 가진 모든 요소

 

1. 식별자
2. 다중선택
3. 관계로 선택
4. 속성값 선택
5. 액션

---

1. 식별자

- tag name

p {...}
span {...}
div {...}

- class name

.class-name {...}

- id name

#id-name {...}

 

2. 다중 선택

- 클래스1 과 클래스2를 전부 가지고 있는 요소 선택

.name1.name2 { ... }

<div class="name1 name2"> ... </div>	<!--선택됨-->
<div class="name1"> ... </div>	<!--선택안됨-->

 

- a 또는 b 요소 선택

div, span { ... }

 

3. 관계로 선택

- 자식 선택

div>p { ... }

<div>
	<p> ... </p>	<!--선택됨-->
    <span>
    	<p> ... </p>	<!--선택 안됨-->
    </span>
</div>

 

- n번째 자식 선택

div:nth-child(2) { ... }

<div>
	<p> ... </p>
	<span> ... </span>	<!--선택됨-->
	<h1> ... </h1>
</div>

 

- 하위 선택

div p { ... }

<div>
	<p> ... </p>	<!--선택됨-->
    <span>
    	<p> ... </p>	<!--선택됨-->
    </span>
</div>

 

- 바로 다음에 있는 형제요소 선택

div+p { ... }

<div> ... </div>
<p> ... </p>	<!--선택됨-->
<p> ... </p>	<!--선택안됨-->

 

- 이후 나타나는 모든 형제요소 선택

div~p { ... }

<p> ... </p>	<!--선택안됨-->
<div> ... </div>
<p> ... </p>	<!--선택됨-->
<p> ... </p>	<!--선택됨-->

 

4. 속성값 선택

input[type="checkbox"] { ... }

<input type="checkbox"></input>	<!--선택됨-->
<input type="radio"></input>	<!--선택안됨-->

 

5. 액션

- link 를 눌렀을 때

a:action { ... }

 

- 마우스를 댔을 때

div:hover { ... }

 

- 포커스가 맞춰졌을 때

input:focus { ... }

 

- 체크했을 때

input[type="checkbox"]:checked { ... }

 

 

 

이 외에도 다양한 선택자들이 있다. 출처는 요기 → (https://www.w3schools.com/cssref/css_selectors.asp)

selector	example	description
*	*	전부 다
[attribute]	[target]	Selects all elements with a target attribute
[attribute=value]	[target=_blank]	Selects all elements with target="_blank"
[attribute~=value]	[title~=flower]	Selects all elements with a title attribute containing the word "flower"
[attribute|=value]	[lang|=en]	Selects all elements with a lang attribute value starting with "en"
[attribute^=value]	a[href^="https"]	Selects every <a> element whose href attribute value begins with "https"
[attribute$=value]	a[href$=".pdf"]	Selects every <a> element whose href attribute value ends with ".pdf"
[attribute*=value]	a[href*="w3schools"]	Selects every <a> element whose href attribute value contains the substring "w3schools"
:active	a:active	Selects the active link
::after	p::after	Insert something after the content of each <p> element
::before	p::before	Insert something before the content of each <p> element
:checked	input:checked	Selects every checked <input> element
:default	input:default	Selects the default <input> element
:disabled	input:disabled	Selects every disabled <input> element
:empty	p:empty	Selects every <p> element that has no children (including text nodes)
:enabled	input:enabled	Selects every enabled <input> element
:first-child	p:first-child	Selects every <p> element that is the first child of its parent
::first-letter	p::first-letter	Selects the first letter of every <p> element
::first-line	p::first-line	Selects the first line of every <p> element
:first-of-type	p:first-of-type	Selects every <p> element that is the first <p> element of its parent
:focus	input:focus	Selects the input element which has focus
:fullscreen	:fullscreen	Selects the element that is in full-screen mode
:hover	a:hover	Selects links on mouse over
:in-range	input:in-range	Selects input elements with a value within a specified range
:indeterminate	input:indeterminate	Selects input elements that are in an indeterminate state
:invalid	input:invalid	Selects all input elements with an invalid value
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute equal to "it" (Italian)
:last-child	p:last-child	Selects every <p> element that is the last child of its parent
:last-of-type	p:last-of-type	Selects every <p> element that is the last <p> element of its parent
:link	a:link	Selects all unvisited links
::marker	::marker	Selects the markers of list items
:not(selector)	:not(p)	Selects every element that is not a <p> element
:nth-child(n)	p:nth-child(2)	Selects every <p> element that is the second child of its parent
:nth-last-child(n)	p:nth-last-child(2)	Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n)	p:nth-of-type(2)	Selects every <p> element that is the second <p> element of its parent
:only-of-type	p:only-of-type	Selects every <p> element that is the only <p> element of its parent
:only-child	p:only-child	Selects every <p> element that is the only child of its parent
:optional	input:optional	Selects input elements with no "required" attribute
:out-of-range	input:out-of-range	Selects input elements with a value outside a specified range
::placeholder	input::placeholder	Selects input elements with the "placeholder" attribute specified
:read-only	input:read-only	Selects input elements with the "readonly" attribute specified
:read-write	input:read-write	Selects input elements with the "readonly" attribute NOT specified
:required	input:required	Selects input elements with the "required" attribute specified
:root	:root	Selects the document's root element
::selection	::selection	Selects the portion of an element that is selected by a user
:target	#news:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:valid	input:valid	Selects all input elements with a valid value
:visited	a:visited	Selects all visited links