2020. 2. 26. 11:38ㆍ카테고리 없음
jQuery를 적용하든지 CSS를 하든지, 선택자를 알아야 적용하는데 또 다 까먹었다.. 정말 놀라울 따름..
* CSS 선택자의 종류 알아보기
(출처: w3schools CSS Selector Reference )
* 선택자 테스터: 직접 예시를 실행해볼 수 있다. => CSS Selector Tester
|
Selector |
Example |
Example description |
|
.intro |
Selects all elements with class="intro" |
|
|
.class1.class2 |
.name1.name2 |
Selects all elements with both name1 and name2 set within its class attribute (.name1과 .name2 둘 다) |
|
.class1 .class2 |
.name1 .name2 |
Selects all elements with name2 that is a descendant of an element with name1 (.name1의 후손(자식포함)인 모든 name2) |
|
#firstname |
Selects the element with id="firstname" |
|
|
* |
Selects all elements |
|
|
p |
Selects all <p> elements |
|
|
p.intro |
Selects all <p> elements with class="intro" |
|
|
div, p |
Selects all <div> elements and all <p> elements |
|
|
div p |
Selects all <p> elements inside <div> elements |
|
|
div > p |
Selects all <p> elements where the parent is a <div> element |
|
|
div + p |
Selects all <p> elements that are placed immediately after <div> elements |
|
|
p ~ ul |
Selects every <ul> element that are preceded by a <p> element (<p>가 앞에 있는 모든 <ul> = <p> 뒤에 오는 모든 <ul>: 후손이랑 다름! 뒤에 오는 모든 것! ) |
|
|
- property 선택자 |
|
|
|
[target] |
Selects all elements with a target attribute |
|
|
[target=_blank] |
Selects all elements with target="_blank" |
|
|
[title~=flower] |
Selects all elements with a title attribute containing the word "flower" (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" (위의 거랑 뭐가 다른 거지...? 링크 있는 애들한테 해당되나 보다..) |
|
|
a[href$=".pdf"] |
Selects every <a> element whose href attribute value ends with ".pdf" (해당 속성 값이 value로 끝나는 모든 지정된 element) |
|
|
a[href*="w3schools"] |
Selects every <a> element whose href attribute value contains the substring "w3schools" |
|
|
a:active |
Selects the active link |
|
|
p::after |
Insert something after the content of each <p> element |
|
|
p::before |
Insert something before the content of each <p> element |
|
|
input:checked |
Selects every checked <input> element |
|
|
input:default |
Selects the default <input> element |
|
|
input:disabled |
Selects every disabled <input> element |
|
|
p:empty |
Selects every <p> element that has no children (including text nodes) |
|
|
input:enabled |
Selects every enabled <input> element |
|
|
p:first-child |
Selects every <p> element that is the first child of its parent |
|
|
p::first-letter |
Selects the first letter of every <p> element |
|
|
p::first-line |
Selects the first line of every <p> element |
|
|
p:first-of-type |
Selects every <p> element that is the first <p> element of its parent |
|
|
input:focus |
Selects the input element which has focus |
|
|
a:hover |
Selects links on mouse over |
|
|
input:in-range |
Selects input elements with a value within a specified range |
|
|
input:indeterminate |
Selects input elements that are in an indeterminate state |
|
|
input:invalid |
Selects all input elements with an invalid value |
|
|
p:lang(it) |
Selects every <p> element with a lang attribute equal to "it" (Italian) |
|
|
p:last-child |
Selects every <p> element that is the last child of its parent |
|
|
p:last-of-type |
Selects every <p> element that is the last <p> element of its parent |
|
|
a:link |
Selects all unvisited links |
|
|
:not(p) |
Selects every element that is not a <p> element |
|
|
p:nth-child(2) |
Selects every <p> element that is the second child of its parent |
|
|
p:nth-last-child(2) |
Selects every <p> element that is the second child of its parent, counting from the last child |
|
|
p:nth-last-of-type(2) |
Selects every <p> element that is the second <p> element of its parent, counting from the last child |
|
|
p:nth-of-type(2) |
Selects every <p> element that is the second <p> element of its parent |
|
|
p:only-of-type |
Selects every <p> element that is the only <p> element of its parent |
|
|
p:only-child |
Selects every <p> element that is the only child of its parent |
|
|
input:optional |
Selects input elements with no "required" attribute |
|
|
input:out-of-range |
Selects input elements with a value outside a specified range |
|
|
input::placeholder |
Selects input elements with the "placeholder" attribute specified |
|
|
input:read-only |
Selects input elements with the "readonly" attribute specified |
|
|
input:read-write |
Selects input elements with the "readonly" attribute NOT specified |
|
|
input:required |
Selects input elements with the "required" attribute specified |
|
|
:root |
Selects the document's root element |
|
|
::selection |
Selects the portion of an element that is selected by a user |
|
|
#news:target |
Selects the current active #news element (clicked on a URL containing that anchor name) |
|
|
input:valid |
Selects all input elements with a valid value |
|
|
a:visited |
Selects all visited links |