Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- pseudo-code
- Java
- 상속과 참조
- 2차원배열 구간합
- function test
- jquery
- cas알고리즘
- Bean LifecCycle
- 생성자
- interrupted()
- 구간합구하기
- map()
- InterruptException
- SQL
- @NoArgsConstructor
- @AllArgsConstructor
- json
- 백준 11660번
- 백준 1235번
- 구간합
- this와 this() 차이
- 백준
- select
- 합배열
- ajax
- 슈더코드
- 자바 람다식
- 멀티스레드
- this
- 백준 11659번
Archives
- Today
- Total
평범한 연구소
[HTML|CSS] 선택자 (selector) 본문
Selector | Example | Example description | Version |
---|---|---|---|
.class | .intro | 클래스가 "intro"인 모든 요소를 선택한다 | 1 |
#id | #firstname | ID "firstname"인 모든 요소를 선택한다 | 1 |
* | * | 모든 요소를 선택한다 | 2 |
element | p | 모든 <p> 요소를 선택한다 | 1 |
element,element | div,p | 모든 <div>, <p> 요소를 선택한다 | 1 |
element element | div p | <div>에 있는 모든 <p> 요소를 선택한다 | 1 |
element>element | div>p | 부모가 <div>요소인 <p> 요소를 선택한다 | 2 |
element+element | div+p | <div>요소 바로 다음에 추가되는 모든 <p> 요소를 선택한다 | 2 |
[attribute] | [target] | target 속성이 있는 모든 요소를 선택한다 | 2 |
[attribute=value] | [taget=_blank] | target 속성의 속성 값이 "_blank"인 모든 요소를 선택한다 | 2 |
[attritube~=value] | [title~=flower] | title 속성의 속성 값이 "flower" 단어가 포함되는 모든 요소를 선택한다 | 2 |
[attribute|=value] | [lang|=en] | lang 속성의 속성 값이 "en"으로 시작되는 모든 요소를 선택한다 | 2 |
:link | a:link | 방문하지 않은 모든 링크를 선택한다 | 1 |
:visited | a:visited | 방문한 모든 링크를 선택한다 | 1 |
:active | a:active | 활성화 중인 모든 링크를 선택한다 | 1 |
:hover | a:hover | 마우스 오버 중인 모든 링크를 선택한다 | 1 |
:focus | input:focus | 포커스가 있는 입력 요소를 선택한다 | 2 |
:first-letter | p:first-letter | 모든 <p> 요소의 첫 글자를 선택한다 | 1 |
:first-line | p:first-line | 모든 <p> 요소의 첫 번째 행을 선택한다 | 1 |
:first-child | p:first-child | 그 부모의 첫 번째 자식인 모든 <p> 요소를 선택한다 | 2 |
:before | p:before | 모든 <p> 요소의 컨텐츠 전에 내용을 삽입한다 | 2 |
:after | p:after | 모든 <p> 요소의 컨텐츠 다음에 내용을 삽입한다 | 2 |
:lang(language) | p:lang(it) | lang 속성의 속성 값이 "it"으로 시작되는 모든 <p> 요소를 선택한다 | 2 |
element1~element2 | p~ul | <p> 요소 이후에 나오는 모든 <ul> 요소를 선택한다 | 3 |
[attribute^=value] | a[src^="https"] | <a> 요소 중 src 속성의 속성 값이 "https"로 시작되는 모든 요소를 선택한다 | 3 |
[attribute$=value] | a[src$=".pdf"] | <a> 요소 중 src 속성의 속성 값이 ".pdf"로 끝나는 모든 요소를 선택한다 | 3 |
[attribute*=value] | a[src*="w3schools"] | <a> 요소 중 src 속성의 속성 값이 "w3schools"가 포함되는 모든 요소를 선택한다 | 3 |
:first-of-type | p:first-of-type | 그 부모의 모든 첫 번째 <p> 요소를 선택한다 | 3 |
:last-of-type | p:last-of-type | 그 부모의 모든 마지막 번째 <p> 요소를 선택한다 | 3 |
:only-of-type | p:only-of-typ | 첫 번째 부모의 모든 <p> 요소를 선택한다 | 3 |
:only-child | p:only-child | <p> 요소만 유일하게 갖는 부모의 <p> 요소를 선택한다 | 3 |
:nth-child(n) | p:nth-child(2) | 그 부모의 <p> 요소 중 모든 두 번째(상단부터) <p> 선택한다 | 3 |
:nth-last-child(n) | p:nth-last-child(2) | 그 부모의 <p> 요소 중 모든 두 번째(하단부터) <p> 선택한다 | 3 |
:nth-of-type(n) | p:nth-of-type(2) | p:nth-child(2)과 동일한 기능을 한다 | 3 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | p:nth-last-child(2)과 동일한 기능을 한다 | 3 |
:last-child | p:last-child | 그 부모의 마지막 번째 자식인 모든 <p> 요소를 선택한다 | 3 |
:root | :root | 문서의 루트 요소를 선택한다 | 3 |
:empty | p:empty | 자식이 없는(텍스트 노드 포함) 모든 <p> 요소를 선택한다 | 3 |
:target | #news:target | 현재 활성화 된 #news 요소를 선택한다 | 3 |
:enabled | input:enabled | input 요소의 disabled 속성이 enabled(default 값)로 된 모든 요소를 선택한다 | 3 |
:disabled | input:disabled | input 요소의 disabled 속성이 disabled로 된 모든 요소를 선택한다 | 3 |
:checked | input:checked | input 요소의 checked 속성이 된 모든 요소를 선택한다 | 3 |
:not(selector) | :not(p) | <p> 요소가 아닌 모든 요소를 선택한다 | 3 |
::selection | ::selection | 사용자에 의해 선택된 요소의 부분을 선택한다 | 3 |
'Pront' 카테고리의 다른 글
[HTML|JS] 로또 (0) | 2022.09.23 |
---|---|
[HTML|CSS|JS] 달력 계산기 만들기 (0) | 2022.09.23 |
[HTML] form, input 태그와 기타 관련 태그 (0) | 2022.09.18 |