CSS class Selector(클래스 선택자)

클래스 선택자(CSS class Selector)

 

 

패턴	매치	예제
*	모든 요소	*
tag	주어진 태그 이름을 가진 요소	div
*|E	모든 네임스페이스에 있는 유형 E의 요소(네임스페이스가 아닌 경우 포함)	*|name발견 <fb:name>및 <name>요소
ns|E	네임스페이스 ns 에 있는 유형 E의 요소	fb|name<fb:name>요소를 찾습니다
#id	속성 ID가 "id"인 요소	div#wrap, #logo
.class	클래스 이름이 "class"인 요소	div.left, .result
[attr]	속성이 "attr"인 요소(모든 값 포함)	a[href], [title]
[^attrPrefix]	속성 이름이 "attrPrefix"로 시작하는 요소. HTML5 데이터세트로 요소를 찾는 데 사용	[^data-], div[^data-]
[attr=val]	속성이 "attr"이고 값이 "val"인 요소	img[width=500], a[rel=nofollow]
[attr="val"]	속성이 "attr"이고 값이 "val"인 요소	span[hello="Cleveland"][goodbye="Columbus"], a[rel="nofollow"]
[attr^=valPrefix]	속성이 "attr"이고 값이 "valPrefix"로 시작하는 요소	a[href^=http:]
[attr$=valSuffix]	속성이 "attr"이고 값이 "valSuffix"로 끝나는 요소	img[src$=.png]
[attr*=valContaining]	속성이 "attr"이고 값이 "valContaining"인 요소	a[href*=/search/]
[attr~=regex]	속성이 "attr"이고 정규식과 일치하는 값이 있는 요소	img[src~=(?i)\\.(png|jpe?g)]
	위의 내용은 임의의 순서로 결합될 수 있습니다.	div.header[title]
	조합
E F	E 요소에서 파생된 F 요소	div a, .logo h1
E > F	E의 F 직계 자식	ol > li
E + F	형제 E가 바로 앞에 오는 F 요소	li + li, div.head + div
E ~ F	형제 E가 앞에 오는 F 요소	h1 ~ p
E, F, G	일치하는 모든 요소 E, F 또는 G	a[href], div, h3
	의사 선택자
:lt(n)	형제 인덱스가 n 보다 작은 요소	td:lt(3) 각 행의 처음 3개 셀을 찾습니다.
:gt(n)	형제 인덱스가 n 보다 큰 요소	td:gt(1) 처음 두 개를 건너뛴 후 셀을 찾습니다.
:eq(n)	형제 인덱스가 n 인 요소	td:eq(0) 각 행의 첫 번째 셀을 찾습니다.
:has(selector)	선택자와 일치하는 하나 이상의 요소를 포함하는 요소	div:has(p)요소 div를 포함하는 s를 찾습니다 p. 직접 자식 요소가 하나 이상 있는 요소를 div:has(> a)선택 div합니다 a.
:not(selector)	선택자 와 일치하지 않는 요소 . 또한보십시오Elements.not(String)	div:not(.logo) "logo" 클래스가 없는 모든 div를 찾습니다.div:not(:has(div)) div를 포함하지 않는 div를 찾습니다.
:contains(text)	지정된 텍스트를 포함하는 요소. 검색은 대소문자를 구분하지 않습니다. 텍스트는 찾은 요소 또는 해당 하위 항목에 나타날 수 있습니다. 텍스트는 정규화 된 공백입니다.괄호가 포함된 콘텐츠를 찾으려면 괄호를 \.	p:contains(jsoup) "jsoup" 텍스트를 포함하는 p 요소를 찾습니다.p:contains(hello \(there\) finds p elements containing the text "Hello (There)"
:containsOwn(text)	지정된 텍스트를 직접 포함하는 요소. 검색은 대소문자를 구분하지 않습니다. 텍스트는 하위 요소가 아니라 찾은 요소에 나타나야 합니다.	p:containsOwn(jsoup) 자체 텍스트 "jsoup"이 있는 p 요소를 찾습니다.
:containsData(data)	지정된 데이터 를 포함하는 요소 . script및 style요소 및 comment노드(등) 의 내용은 텍스트 노드가 아닌 데이터 노드로 간주됩니다. 검색은 대소문자를 구분하지 않습니다. 데이터는 발견된 요소 또는 해당 하위 항목에 나타날 수 있습니다.	script:contains(jsoup) "jsoup" 데이터를 포함하는 스크립트 요소를 찾습니다.
:matches(regex)	지정된 정규식과 일치 하는 공백 정규화된 텍스트를 포함하는 요소 . 텍스트는 찾은 요소 또는 해당 하위 항목에 나타날 수 있습니다.	td:matches(\\d+)숫자가 포함된 테이블 셀을 찾습니다. div:matches((?i)login)대소문자를 구분하지 않고 텍스트가 포함된 div를 찾습니다.
:matchesOwn(regex)	자체 텍스트가 지정된 정규식과 일치하는 요소. 텍스트는 하위 요소가 아니라 찾은 요소에 나타나야 합니다.	td:matchesOwn(\\d+)숫자를 직접 포함하는 테이블 셀을 찾습니다. div:matchesOwn((?i)login)대소문자를 구분하지 않고 텍스트가 포함된 div를 찾습니다.
	위의 순서는 다른 선택자와 결합할 수 있습니다.	.light:contains(name):eq(0)
:matchText	텍스트 노드를 요소로 취급하므로 텍스트 노드와 일치시키고 선택할 수 있습니다.주 당신이 할 수 있도록이 선택기를 사용하면, DOM을 수정하는 것을 clone사용하기 전에 문서.	p:matchText:firstChild입력 <p>One<br />Two</p>이 있는 경우 PseudoTextElement" One"라는 텍스트 가 포함된 항목이 반환됩니다 .
구조적 의사 선택자
:root	문서의 루트인 요소입니다. HTML에서 이것은 html요소입니다.	:root
:nth-child(an+b)	이 소자 형제 전에 임의의 양의 정수 또는 제로 값을 문서 트리를 , 그리고 부모 구성 요소를 갖는다. 의 값 과 0보다 크면이 효과적으로 소자 (마지막 그룹은 나머지 복용) 그룹으로 요소의 자식을 분할하고, 선택 B를 각 그룹의 번째 요소. 예를 들어, 이렇게 하면 선택기가 표의 다른 모든 행을 처리할 수 있으며 4 주기로 단락 텍스트의 색상을 교체하는 데 사용할 수 있습니다. 및 값은 정수 (양극, 음극, 또는 제로)이어야한다. 요소의 첫 번째 자식 인덱스는 1입니다.an+b-1nabab 이 외에도 및 대신 인수로 :nth-child()사용할 수 있습니다 . 동일한 의미를 가지고 , 및 동일한 의미를 갖는다 .oddevenodd2n+1even2n	tr:nth-child(2n+1)테이블의 모든 홀수 행을 찾습니다. :nth-child(10n-1)9, 19, 29 등 요소. li:nth-child(5)5시간 리
:nth-last-child(an+b)	문서 트리에서 뒤에 형제 가 있는 요소 . 그렇지 않으면 같은an+b-1:nth-child()	tr:nth-last-child(-n+2) 테이블의 마지막 두 행
:nth-of-type(an+b)	의사 클래스 표기법은 n의 0 또는 양의 정수 값에 대해 문서 트리에서 확장된 요소 이름 앞에 동일한 확장 요소 이름 을 가진 형제 가 있고 상위 요소가 있는 요소를 나타냅니다.an+b-1	img:nth-of-type(2n+1)
:nth-last-of-type(an+b)	의사 클래스 표기법은 0 또는 양의 정수 값 n에 대해 문서 트리에서 확장된 요소 이름 뒤에 동일한 확장 요소 이름 을 가진 형제 가 있고 상위 요소가 있는 요소를 나타냅니다.an+b-1	img:nth-last-of-type(2n+1)
:first-child	다른 요소의 첫 번째 자식 요소입니다.	div > p:first-child
:last-child	다른 요소의 마지막 자식인 요소.	ol > li:last-child
:first-of-type	부모 요소의 자식 목록에서 해당 유형의 첫 번째 형제 요소	dl dt:first-of-type
:last-of-type	부모 요소의 자식 목록에서 해당 유형의 마지막 형제 요소	tr > td:last-of-type
:only-child	부모 요소가 있고 부모 요소에 다른 요소 자식이 없는 요소
:only-of-type	상위 요소가 있고 상위 요소에 동일한 확장된 요소 이름을 가진 다른 하위 요소가 없는 요소
:empty	자식이 전혀 없는 요소

 

참고사이트

https://jsoup.org/apidocs/org/jsoup/select/Selector.html

Selector (jsoup Java HTML Parser 1.14.3 API)

 

https://www.nextree.co.kr/p8468/

CSS: 선택자(Selector) 이해