CSS 선택자

Created

2021/07/02 06:43

CSS 선택자

CSS에서 선택기는 스타일을 지정할 요소를 선택하는 데 사용되는 패턴입니다.

CSS 선택기 테스터 를 사용 하여 다양한 선택기를 시연하십시오.

Show All

선택자 리스트

Selector

Example

Example description

.class

.intro

Open

Selects all elements with class="intro"

.class1.class2

.name1.name2

Open

Selects all elements with both name1 and name2 set within its class attribute

.class1 .class2

.name1 .name2

Open

Selects all elements with name2 that is a descendant of an element with name1

#id

#firstname

Open

Selects the element with id="firstname"

Open

Selects all elements

element

Open

Selects all <p> elements

element.class

p.intro

Open

Selects all <p> elements with class="intro"

element,element

div, p

Open

Selects all <div> elements and all <p> elements

element element

div p

Open

Selects all <p> elements inside <div> elements

element >element

div > p

Open

Selects all <p> elements where the parent is a <div> element

element +element

div + p

Open

Selects the first <p> element that is placed immediately after <div> elements

element1 ~element2

p ~ ul

Open

Selects every <ul> element that is preceded by a <p> element

[attribute ]

[target]

Open

Selects all elements with a target attribute

[attribute =value ]

[target=_blank]

Open

Selects all elements with target="_blank"

[attribute ~=value ]

[title~=flower]

Open

Selects all elements with a title attribute containing the word "flower"

[attribute |=value ]

[lang|=en]

Open

Selects all elements with a lang attribute value starting with "en"

[attribute ^=value ]

a[href^="https"]

Open

Selects every <a> element whose href attribute value begins with "https"

[attribute $=value ]

a[href$=".pdf"]

Open

Selects every <a> element whose href attribute value ends with ".pdf"

[attribute *=value ]

a[href*="w3schools"]

Open

Selects every <a> element whose href attribute value contains the substring "w3schools"

:active

a:active

Open

Selects the active link

::after

p::after

Open

Insert something after the content of each <p> element

::before

p::before

Open

Insert something before the content of each <p> element

:checked

input:checked

Open

Selects every checked <input> element

:default

input:default

Open

Selects the default <input> element

:disabled

input:disabled

Open

Selects every disabled <input> element

:empty

p:empty

Open

Selects every <p> element that has no children (including text nodes)

:enabled

input:enabled

Open

Selects every enabled <input> element

:first-child

p:first-child

Open

Selects every <p> element that is the first child of its parent

::first-letter

p::first-letter

Open

Selects the first letter of every <p> element

::first-line

p::first-line

Open

Selects the first line of every <p> element

:first-of-type

p:first-of-type

Open

Selects every <p> element that is the first <p> element of its parent

:focus

input:focus

Open

Selects the input element which has focus

:fullscreen

Open

Selects the element that is in full-screen mode

:hover

a:hover

Open

Selects links on mouse over

:in-range

input:in-range

Open

Selects input elements with a value within a specified range

:indeterminate

input:indeterminate

Open

Selects input elements that are in an indeterminate state

:invalid

input:invalid

Open

Selects all input elements with an invalid value

:lang(language )

p:lang(it)

Open

Selects every <p> element with a lang attribute equal to "it" (Italian)

:last-child

p:last-child

Open

Selects every <p> element that is the last child of its parent

:last-of-type

p:last-of-type

Open

Selects every <p> element that is the last <p> element of its parent

:link

a:link

Open

Selects all unvisited links

::marker

Open

Selects the markers of list items

:not(selector )

:not(p)

Open

Selects every element that is not a <p> element

:nth-child(n )

p:nth-child(2)

Open

Selects every <p> element that is the second child of its parent

:nth-last-child(n )

p:nth-last-child(2)

Open

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)

Open

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)

Open

Selects every <p> element that is the second <p> element of its parent

:only-of-type

p:only-of-type

Open

Selects every <p> element that is the only <p> element of its parent

:only-child

p:only-child

Open

Selects every <p> element that is the only child of its parent

:optional

input:optional

Open

Selects input elements with no "required" attribute