셀렉터 (Selector)

지은·2022년 8월 26일

combinator pseudo-classes selector selector

CSS

목록 보기

4/9

기본 셀렉터(Basic selector)

전체 셀렉터(Universal selector)

: 문서의 모든 요소를 선택한다.

* {}

태그 셀렉터(Type selector)

: 같은 태그명을 가진 모든 요소를 선택한다.

복수 선택할 수 있다.

h1, section {}

ID 셀렉터(ID selector)

: #id로 입력하여 선택한다.

#only {}

Class 셀렉터(Class selector)

: .class로 입력하여 선택한다.

.center {}

속성 셀렉터(Attribute selector)

: 속성의 존재 여부나 속성의 값에 따라 선택한다.

`e[attr]`

e[attr] : attr 속성을 가진 요소를 선택

a[href] {} 
/* href 속성을 가지고 있는 a 요소 */

`e[attr="value"]`

e[attr="value"] : attr 속성의 값이 value인 요소를 선택

a[href="https://velog.io/@wlwl99"] {} 
/* href의 속성값이 "https://velog.io/@wlwl99"인 요소 */

`e[attr^="value"]`

e[attr^="value"] : attr 속성의 값이 value로 시작하는 요소를 선택

a[href^="https://"] {} 
/* href의 속성값이 "https://"로 시작하는 요소 */

`e[attr$="value"]`

e[attr$="value"] : attr 속성의 값이 value로 끝나는 요소를 선택

a[href$=".com"] {} 
/* href의 속성값이 ".com"으로 끝나는 요소 */

`e[attr~="value"]`

e[attr]~="value" : attr 속성의 값이 value를 포함하고 있는 요소를 선택

공백으로 구분되어 있는 문자열에서만 사용할 수 있다.

input[value~="the"] {} 
/* value의 속성값에 "the"를 포함하고 있는 요소 */

<input value='Welcome to the show!' /> <!--선택 ✅-->
<input value='Welcome to a show!' />

`e[attr*="value"]`

e[attr]*="value" : attr 속성의 값이 value를 포함하고 있는 요소를 선택

공백으로 구분되어 있지 않은 문자열에서도 사용할 수 있다.

h2[title*="rst h"] {} 
/* title의 속성값에 "rst h"을 포함하고 있는 요소 */

<h2 title="first heading">Heading 1</h2> <!--선택 ✅-->
<h2 title="second heading">Heading 2</h2>
<h2 title="third heading">Heading 3</h2>

`e[attr|="value"]`

e[attr]|="value" : attr 속성의 값이 value를 포함하고 있는 요소를 선택

하이픈-으로 구분되어 있는 문자열에서만 사용할 수 있다.

p[lang|="en"] {} 
/* lang의 속성값에 "en"을 포함하고 있는 요소 */

<p lang="en-US">abcdefg...</p> <!--선택 ✅-->
<p lang="ko-KR">가나다라마...</p>

결합자(Combinator)

자식 결합자(Child combinator)

parent_e > child_e {} (> 로 연결)
: 자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래인 자식요소를 선택한다.

/* CSS */
ul > li {} /* ul 요소의 바로 아래 자식 요소인 li 선택 */

<!--HTML-->
<ul>
	<li>item 1</li> <!-- 선택 ✅ -->
    <li>item 2</li> <!-- 선택 ✅ -->
    <ol>
    	<li>item A</li>
        <li>item B</li>
    </ol>
    <li>item 3</li> <!-- 선택 ✅ -->
</ul>

자손/후손 결합자(Descendant combinator)

ancestor_e descendant_e {} ( 으로 연결)
: 후손 셀렉터는 첫 번째로 입력한 요소의 후손 요소를 선택한다.

/* CSS */
ul li {} /* ul 요소의 후손 요소인 li 선택 */

<!--HTML-->
<ul>
	<li>item 1</li> <!-- 선택 ✅ -->
    <li>item 2</li> <!-- 선택 ✅ -->
    <ol>
    	<li>item A</li> <!-- 선택 ✅ -->
        <li>item B</li> <!-- 선택 ✅ -->
    </ol>
    <li>item 3</li> <!-- 선택 ✅ -->
</ul>

일반 형제 결합자(General sibling combinator)

sibling_e ~ sibling_e (~으로 연결)
: 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택한다.

/* CSS */
section ~ p {}

<!--HTML-->
<header>
  <section></section>
  <p></p> <!-- 선택 ✅ -->
  <p></p> <!-- 선택 ✅ -->
  <p></p> <!-- 선택 ✅ -->
</header>

인접 형제 결합자(Adjacent sibling combinator)

sibling_e + sibling_e (+으로 연결)
: 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택한다.

/* CSS */
section + p {}

<!--HTML-->
<header>
  <section></section>
  <p></p> <!-- 선택 ✅ -->
  <p></p>
  <p></p>
</header>

가상 클래스 셀렉터(Pseudo-class)

: 가상 클래스는 요소의 상태정보에 기반해 요소를 선택한다.

a:link {} : 아직 방문하지 않은 요소를 선택
a:visited {} : 사용자가 방문한 적이 있는 요소를 선택
a:hover {} : 사용자의 커서가 올라가 있는 요소를 선택
a:active {} : 사용자가 활성화한 요소를 선택

활성 : 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미한다.

a:focus {} : 사용자에게 포커스를 받은 요소를 선택

포커스 : 요소를 클릭 또는 탭하거나, 키보드 Tab키로 선택했을 때를 의미한다.

:focus 와 :active 의 차이

<button>은 처음에 아무런 상태도 가지고 있지 않다.

Tab키로 <button>에 포커스되었을 때 ➡️ :focus상태가 된다.

<button>을 클릭했을 때 ➡️ :active상태가 된다.

요소를 클릭하면, 요소에 포커스 또한 되기 때문에 <button>을 클릭하면 :focus:active 상태가 된다.

이 때문에, 요소를 클릭했을 때 :focus와 :active 상태가 동시에 일어나 혼동하기 쉽지만, :focus와 :active는 같지 않다!
What is the difference between :focus and :active? stack overflow

구조 가상 클래스 셀렉터(Structural pseudo-class)

`:-child`

:first-child : 형제 요소 중 제일 첫 요소 선택

p:first-child { } /* p요소가 제일 첫 번째 형제 요소라면 선택  */
ul > li:first-child { } /* ul요소의 자식 중 li요소가 제일 첫 형제 요소라면 선택  */

:last-child : 형제 요소 중 제일 마지막 요소 선택

ul > li:last-child { } /* ul요소의 자식 중 li요소가 가장 마지막 형제 요소라면 선택 */

:nth-child() : 형제 요소의 순서에 따라 요소를 선택

div > div:nth-child(4) { } /* div요소의 자식 중 div요소가 4번째 형제 요소라면 선택 */
ul > li:nth-child(2n) { } /* ul요소의 자식 중 li요소가 짝수번째 형제 요소라면 선택 */
section > p:nth-child(2n+1) { } /* section요소의 자식 중 p요소가 홀수번째 형제 요소라면 선택 */

:nth-last-child() : 뒤에서부터 계산한 형제 요소의 순서에 따라 요소를 선택

div:nth-last-child(2) { } /* div요소가 뒤에서 2번째 형제 요소라면 선택 */
section > p:nth-last-child(2n + 1) { } 
/* section요소의 자식 중 p요소가 뒤에서부터 홀수번째 요소라면 선택 */

`:-of-type`

:first-of-type : 형제 요소 중 자신의 유형과 일치하는 제일 첫 요소 선택

p:first-of-type { } /* 형제 요소 중 첫 번째 p요소 선택 */

:last-of-type : 형제 요소 중 자신의 유형과 일치하는 마지막 선택

div:last-of-type { } /* 형제 요소 중 마지막 div요소 선택 */

:nth-of-type() : 형제 요소의 순서에 따라 자신의 유형과 일치하는 요소를 선택

ul:nth-of-type(2) { } /* 형제 요소 중 두 번째 ul요소 선택 */

:nth-last-of-type : 뒤에서부터 계산한 형제 요소의 순서에 따라 자신의 유형과 일치하는 요소를 선택

p:nth-last-of-type(1) { } /* 형제 요소 중 뒤에서 첫 번째 p요소 선택 */

:first-child와 :first-type-of의 차이점

e:first-child : 형제 요소 중 e 요소가 첫 번째 요소일 때 선택
div > p:first-child
<div>
  <h1>첫 번째 h1</h1> 
  <p>첫 번째 p</p>
  <p>두 번째 p</p>
</div>
e:first-type-of : 형제 요소 중 유형이 e인 요소 중 첫 번째 요소 선택
div > p:first-of-type
<div>
  <h1>첫 번째 h1</h1> 
  <p>첫 번째 p</p> 
  <p>두 번째 p</p>
</div>

Pseudo-class MDN

UI 요소 상태 셀렉터(UI pseudo-class)

input:checked {} : 사용자가 요소를 체크하거나 선택하여 활성화된 요소를 선택
input:enabled {} : 모든 활성 요소를 선택 (활성 요소 : 선택, 클릭, 입력 ...)
input:disabled {} : 모든 비활성 요소를 선택 (비활성 요소 : 선택, 클릭, 입력 등의 포커스를 받을 수 없는 요소)

UI pseudo-classes MDN

부정 셀렉터 `not()`

not() : 인수와 일치하지 않는 모든 요소를 선택

body :not(p) { color: green; } /* body의 후손 요소 중 p가 아닌 모든 요소 선택 */
input:not([type="password"]) { } /* input요소 중 타입이 패스워드가 아닌 모든 요소 선택 */
div:not(:nth-of-type(2)) { } /* div요소 중 두 번째 div요소가 아닌 모든 요소 선택*/

정합성 확인 셀렉터(Validity pseudo-class)

:valid : 유효성 검사를 통과한 input 요소 또는 form 요소를 선택
:invalid: 유효성 검사를 통과하지 못한 input 요소 또는 form 요소를 선택

input[type="text"]:valid { } /* 타입이 text인 input요소 중 valid한 input 요소 선택 */
input[type="text"]:invalid { } /* 타입이 text인 input요소 중 invalid한 input 요소 선택 */

지은

개발 공부 기록 블로그

이전 포스트

Box Model

다음 포스트

셀렉터 (Selector)

CSS

기본 셀렉터(Basic selector)

전체 셀렉터(Universal selector)

태그 셀렉터(Type selector)

ID 셀렉터(ID selector)

Class 셀렉터(Class selector)

속성 셀렉터(Attribute selector)

`e[attr]`

`e[attr="value"]`

`e[attr^="value"]`

`e[attr$="value"]`

`e[attr~="value"]`

`e[attr*="value"]`

`e[attr|="value"]`

결합자(Combinator)

자식 결합자(Child combinator)

자손/후손 결합자(Descendant combinator)

일반 형제 결합자(General sibling combinator)

인접 형제 결합자(Adjacent sibling combinator)

가상 클래스 셀렉터(Pseudo-class)

`:focus` 와 `:active` 의 차이

구조 가상 클래스 셀렉터(Structural pseudo-class)

`:-child`

`:-of-type`

`:first-child`와 `:first-type-of`의 차이점

UI 요소 상태 셀렉터(UI pseudo-class)

부정 셀렉터 `not()`

정합성 확인 셀렉터(Validity pseudo-class)

Box Model

레이아웃

0개의 댓글

셀렉터 (Selector)

CSS

기본 셀렉터(Basic selector)

전체 셀렉터(Universal selector)

태그 셀렉터(Type selector)

ID 셀렉터(ID selector)

Class 셀렉터(Class selector)

속성 셀렉터(Attribute selector)

e[attr]

e[attr="value"]

e[attr^="value"]

e[attr$="value"]

e[attr~="value"]

e[attr*="value"]

e[attr|="value"]

결합자(Combinator)

자식 결합자(Child combinator)

자손/후손 결합자(Descendant combinator)

일반 형제 결합자(General sibling combinator)

인접 형제 결합자(Adjacent sibling combinator)

가상 클래스 셀렉터(Pseudo-class)

:focus 와 :active 의 차이

구조 가상 클래스 셀렉터(Structural pseudo-class)

:-child

:-of-type

:first-child와 :first-type-of의 차이점

UI 요소 상태 셀렉터(UI pseudo-class)

부정 셀렉터 not()

정합성 확인 셀렉터(Validity pseudo-class)

Box Model

레이아웃

0개의 댓글

`e[attr]`

`e[attr="value"]`

`e[attr^="value"]`

`e[attr$="value"]`

`e[attr~="value"]`

`e[attr*="value"]`

`e[attr|="value"]`

`:focus` 와 `:active` 의 차이

`:-child`

`:-of-type`

`:first-child`와 `:first-type-of`의 차이점

부정 셀렉터 `not()`

Box Model