Search
Duplicate

CSS 선택자

Created
2021/07/02 06:43
Tags

CSS 선택자

CSS에서 선택기는 스타일을 지정할 요소를 선택하는 데 사용되는 패턴입니다.
CSS 선택기 테스터 를 사용 하여 다양한 선택기를 시연하십시오.
Show All
Search
선택자 리스트
Selector
Example
Example description
.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
#firstname
Open
Selects the element with id="firstname"
Selects all elements
Selects all <p> elements
p.intro
Open
Selects all <p> elements with class="intro"
div, p
Open
Selects all <div> elements and all <p> elements
div p
Open
Selects all <p> elements inside <div> elements
div > p
Open
Selects all <p> elements where the parent is a <div> element
div + p
Open
Selects the first <p> element that is placed immediately after <div> elements
p ~ ul
Open
Selects every <ul> element that is preceded by a <p> element
[target]
Open
Selects all elements with a target attribute
[target=_blank]
Open
Selects all elements with target="_blank"
[title~=flower]
Open
Selects all elements with a title attribute containing the word "flower"
[lang|=en]
Open
Selects all elements with a lang attribute value starting with "en"
a[href^="https"]
Open
Selects every <a> element whose href attribute value begins with "https"
a[href$=".pdf"]
Open
Selects every <a> element whose href attribute value ends with ".pdf"
a[href*="w3schools"]
Open
Selects every <a> element whose href attribute value contains the substring "w3schools"
a:active
Open
Selects the active link
p::after
Open
Insert something after the content of each <p> element
p::before
Open
Insert something before the content of each <p> element
input:checked
Open
Selects every checked <input> element
input:default
Open
Selects the default <input> element
input:disabled
Open
Selects every disabled <input> element
p:empty
Open
Selects every <p> element that has no children (including text nodes)
input:enabled
Open
Selects every enabled <input> element
p:first-child
Open
Selects every <p> element that is the first child of its parent
p::first-letter
Open
Selects the first letter of every <p> element
p::first-line
Open
Selects the first line of every <p> element
p:first-of-type
Open
Selects every <p> element that is the first <p> element of its parent
input:focus
Open
Selects the input element which has focus
:fullscreen
Open
Selects the element that is in full-screen mode
a:hover
Open
Selects links on mouse over
input:in-range
Open
Selects input elements with a value within a specified range
input:indeterminate
Open
Selects input elements that are in an indeterminate state
input:invalid
Open
Selects all input elements with an invalid value
p:lang(it)
Open
Selects every <p> element with a lang attribute equal to "it" (Italian)
p:last-child
Open
Selects every <p> element that is the last child of its parent
p:last-of-type
Open
Selects every <p> element that is the last <p> element of its parent
a:link
Open
Selects all unvisited links
::marker
Open
Selects the markers of list items
:not(p)
Open
Selects every element that is not a <p> element
p:nth-child(2)
Open
Selects every <p> element that is the second child of its parent
p:nth-last-child(2)
Open
Selects every <p> element that is the second child of its parent, counting from the last child
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
p:nth-of-type(2)
Open
Selects every <p> element that is the second <p> element of its parent
p:only-of-type
Open
Selects every <p> element that is the only <p> element of its parent
p:only-child
Open
Selects every <p> element that is the only child of its parent
input:optional
Open
Selects input elements with no "required" attribute
Load more