[html/css] Selector(선택자) 총 정리

20240802수업
[앞서 알아두면 좋은 내용]

client -(요청)-> server
client <-(파일)- server
index.html (html tag) 구조(영역)만들기
main.css (stylesheet) 모양,색상
main.js (javascript) 동작

<h2>Hello</h2> : element
<h2> : 시작태그
</h2> : 끝태그
"Hello" : text

javascript가 html의 element를 조작하기 위해 찾을때  id="userid"   : document.getElementById('userid') -> 하나를 찾음 
 name="gender" : document.getElementsByname('gender') -> 여러개를 찾음  <h2>          : document.getElementsByTagName('gender') -> 여러개를 찾음  class=""      : document.getElementsByClassName('') -> 여러개를 찾음

배열

css선택자를 공부하는 이유

• 스타일을 조작
• js를 조작
• jquery를 조작
• 파이썬을 조작
• html을 서버로부터 다운받았을때 크롤링를 하기위해 특정태그를 지정해서 가져올때 docume~를 가져옴

Pseudo-classes selector(선택자) - 어떤 상태일 떄 :으로 시작

구조

Selector	Example	Exaple description
.class	.intro	class="intro “인 모든 요소를 선택합니다.
.class1.class2	.name1.name2	클래스 속성 내에 name1과 name2가 둘 다 설정된 모든 요소를 선택합니다.
.class1 .class2	.name1 .name2	name2인 요소 중 이름이 1인 요소의 하위 요소인 모든 요소를 선택합니다.
#id	#firstname	id="이름 “인 요소를 선택합니다.
*	*	모든 요소를 선택합니다.
element	p	모든 <p>요소를 선택합니다.
element.class	p.intro	<p>class="intro “인 모든 요소를 선택합니다.
element,element	div, p	모든 <div>요소와 모든 <p>요소를 선택합니다.
element element	div p	모든<div>요소 내부의 모든 <p>요소를 선택합니다.
element>element	div > p	부모가 <div>인 요소의  모든 <p>요소를 선택합니다.(위와 비슷)
element+element	div + p	<div>요소 뒤에 배치되는 첫번째 <p>요소 한개를 선택합니다.
element1~element2	div ~ p	<div>요소 뒤에 배치되는 모든 <p>요소를 선택합니다.

 

Selector	Example	Exaple description
[attribute]	[target]	대상 속성을 가진 모든 요소를 선택합니다.
[attribute=value]	[target="_blank"]	target="_blank"인 모든 요소를 선택합니다.
[attribute~=value]	[title~="flower"]	제목 속성에 "flower”이라는 단어가 포함된 모든 요소를 선택합니다.
[attribute|=value]	[lang|="en"]	lang 속성 값이 “en”이거나 “en-”로 시작하는 모든 요소를 선택합니다.
[attribute^=value]	a[href^="https"]	<a>href 속성 값이 “https”로 시작하는 모든 요소를 선택합니다.
[attribute$=value]	a[href$=".pdf"]	<a>href 속성 값이 “.pdf”로 끝나는 모든 요소를 선택합니다.
[attribute*=value]	a[href*="w3schools"]	<a>href 속성 값에 하위 문자열 “w3schools”가 포함된 모든 요소를 선택합니다.

 

사용 빈도가 높은 선택자(특정위치 tag선택 - 찾는다)

Selector	Example	Example description
:has()	h2:has(+p)	바로 뒤에 p 요소가 오는 h2 요소를 선택하고 스타일을 h2에 적용합니다.
:not()	:not(p)	<p>요소가 아닌 모든 요소를 선택합니다.
:first-child	p:first-child	<p>상위 요소의 첫 번째 하위 요소를 모두 선택합니다.
:last-child	p:last-child	<p>상위 요소의 마지막 하위 요소인 모든 요소를 선택합니다.
:nth-child()	p:nth-child(2)	<p>상위 요소의 두 번째 하위 요소인 모든 요소를 선택합니다.
:first-of-type	p:first-of-type	<p />의 첫 번째 요소인 모든 요소를 선택합니다.
:last-of-type	p:last-of-type	<p />의 마지막 요소인 모든 요소를 선택합니다.
:nth-of-type()	p:nth-of-type(2)	<p />의 2번째 요소인 모든 요소를 선택합니다.
::after	p::after	p 태그 뒤에 무언가 삽입하십시요.
::before	p::before	p 태그 앞에 무안가 삽입하십시오
::first-letter	p::first-letter	p 태그안에 있는 첫번째 글자를 선택합니다.
::marker	::marker	marker들의 속성을 정합니다.
::selection	::selection	선택(드래그)된 영역만 속성을 정합니다.
::placeholder	input::placeholder	지정된 “placeholder” 속성을 가진 입력 요소를 선택합니다.

place holder

수정:ms브라우저에서는

참고:https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix

이외

Selector	Example	Example Description
:active	a:active	활성 링크를 선택합니다.
::after	p::after	각 <p>요소의 내용 뒤에 무언가를 삽입하십시오.
::before	p::before	각 <p>요소의 내용 앞에 무언가를 삽입하십시오.
:checked	input:checked	체크된 모든 <input>요소를 선택합니다.
:default	input:default	기본 <input>요소를 선택합니다.
:disabled	input:disabled	비활성화된 모든 <input>요소를 선택합니다.
:empty	p:empty	<p>하위 요소가 없는 모든 요소 (텍스트 노드 포함) 를 선택합니다.
:enabled	input:enabled	활성화된 모든 <input>요소를 선택합니다.
::first-letter	p::first-letter	모든 <p>요소의 첫 글자를 선택합니다.
::first-line	p::first-line	모든 <p>요소의 첫 번째 줄을 선택합니다.
:focus	input:focus	포커스가 있는 입력 요소를 선택합니다.
:fullscreen	:fullscreen	전체 화면 모드에 있는 요소를 선택합니다.
:hover	a:hover	마우스 커서를 올릴 시 링크 선택
:in-range	input:in-range	지정된 범위 내의 값을 가진 입력 요소를 선택합니다.
:indeterminate	input:indeterminate	불확정 상태에 있는 입력 요소를 선택합니다.
:invalid	input:invalid	잘못된 값을 가진 모든 입력 요소를 선택합니다.
:lang()	p:lang(it)	<p>lang 속성이 “it" (이탈리아어) 인 모든 요소를 선택합니다.
:link	a:link	방문하지 않은 모든 링크를 선택합니다.
::marker	::marker	목록 항목의 마커를 선택합니다.
:nth-last-child()	p:nth-last-child(2)	<p>마지막 하위 요소부터 계산하여 상위 요소의 2번째 하위 요소를 모두 선택합니다.
:nth-last-of-type()	p:nth-last-of-type(2)	<p><p>마지막 하위 요소부터 계산하여 상위 요소의 2번째 요소인 모든 요소를 선택합니다.
:only-of-type	p:only-of-type	<p><p>상위 요소의 유일한 요소인 모든 요소를 선택합니다.
:only-child	p:only-child	<p>상위 요소의 유일한 하위 요소를 모두 선택합니다.
:optional	input:optional	“필수” 속성이 없는 입력 요소를 선택합니다.
:out-of-range	input:out-of-range	지정된 범위를 벗어난 값을 가진 입력 요소를 선택합니다.
:read-only	input:read-only	지정된 “읽기 전용” 속성을 가진 입력 요소를 선택합니다.
:read-write	input:read-write	“읽기 전용” 속성이 지정되지 않은 입력 요소를 선택합니다.
:required	input:required	지정된 “필수” 속성을 가진 입력 요소를 선택합니다.
:root	:root	문서의 루트 요소를 선택합니다.
:target	#news:target	현재 활성 #news 요소를 선택합니다 (해당 앵커 이름이 포함된 URL을 클릭)
:valid	input:valid	유효한 값을 가진 모든 입력 요소를 선택합니다.
:visited	a:visited	방문했던 모든 링크를 선택합니다.

 

예시

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

 

See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.

참조: https://www.w3schools.com/cssref/css_selectors.php

W3Schools.com

css seloctor 게임:https://flukeout.github.io/

CSS Diner