[QA] 선택자(CSS Selector, XPath)

1. CSS Selector

• 웹 페이지의 스타일링을 위해 설계되었기 때문에 브라우저에서 요소를 찾는 속도가 빠르고 구문이 간결
• 주요 사용 시점

1. 요소를 위에서 아래로(부모에서 자식으로) 찾을 때
2. 단순한 구조 내에서 고유하게 식별 가능한 속성(ID, Class)을 기준으로 찾을 때

 

전체 선택자 ( * )

• 모든 형태의 모든 요소 선택

* {
  color: green;
}

 

태그 선택자

• 노드 이름을 사용해 요소를 선택

a {
  color: red;
}

 

속성 선택자

• 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택

/* title 속성을 가지고 있는 a 태그 */
a[title] {
  color: purple;
}

/* href 속성값이 "https://example.org"인 a 태그 */
a[href="https://example.org"]
{
  color: green;
}

/* href 속성값이 "example"을 포함하는 a 태그 */
a[href*="example"] {
  font-size: 2em;
}

/* href 속성값이 ".org"로 끝나는 a 태그 */
a[href$=".org"] {
  font-style: italic;
}

/* 클래스 속성이 "logo"를 포함하고 있는 a 태그 */
a[class~="logo"] {
  padding: 2px;
}

 

구문

[attr] : attr이라는 이름의 속성을 가진 요소를 선택
[attr=value] : attr 값이 정확히 value인 요소 선택
[attr~=value] : attr 값이 정확히 value인 요소 선택, attr 속성은 공백으로 구분한 여러 개의 값을 가지고 있을 수 있음
[attr|=value] : attr 값이 정확히 value이거나 value로 시작하면서  -  문자가 곧바로 뒤에 따라 붙음
[attr^=value] : attr이라는 속성값을 가지고 있으며, 접두사로 value가 값에 포함되어 있음
[attr$=value] : attr이라는 속성값을 가지고 있으며, 접미사로 value가 값에 포함되어 있음
[attr*=value] : attr이라는 속성값을 가지고 있으며, 값 안에 value라는 문자열이 적어도 하나 이상 존재

 

 

클래스 선택자( . )

• 요소의 class 특성에 기반해 요소를 선택

.spacious {
  margin: 2em;
}

/* spacious와 elegant 클래스를 모두 가지고 있는 모든 li 태그 선택 */
li.spacious.elegant {
  margin: 2em;
}

 

위 코드를 속성 선택자를 이용해 작성한 코드

[class~="spacious"] {
  margin: 2em;
}

 

ID 선택자( # )

• 요소의 id 값을 이용해 선택

#demo {
  border: red 2px solid;
}

 

위 코드를 특성 선택자를 이용해 작성한 코드

[id="demo"] {
	border: red 2px solid;
}

---

그룹 선택자 - 둘 이상 요소에 같은 스타일 적용하기

• 여러 선택자를 , 로 구분하여 한꺼번에 작성
• 목록 내의 하나의 선택자라도 브라우저가 지원하지 않으면 전체 목록을 무효화한다는 단점

h1,
h2:maybe-unsupported,
h3 {
  font-family: sans-serif;
}

 

하위 선택자(자손 선택자) - 지정한 모든 하위 요소에 스타일 적용하기

• 공백 하나로 표현
• 두 번째 선택자에 일치하는 요소가 첫 번째 선택자와 일치하는 조상 요소를 가지고 있는 경우 선택

section p {
  color: blue;
}

 

자식 선택자( > )

• 두 번째 선택자와 일치하는 요소 중 첫 번째 선택자와 일치하는 요소의 직계 자식인 요소

/* 클래스 이름이 "my-things"인 리스트의 자식 li 태그들 */
ul.my-things > li {
  margin: 2em;
}

 

인접 형제선택자 - 가장 가까운 형제 요소에 스타일 적용하기

• 문서 구조상 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일 적용

/* h1 요소 다음에 오는 p 요소들 중 첫 번째 p 요소에만 밑줄 */
h1 + p {
  text-decoration: underline;
}

 

형제 선택자 - 형제 요소에 스타일 적용하기

• 모든 형제 요소에 적용

h1 ~ p {
  text-decoration: underline;
}

 

:is( )

• 유효하지 않은 선택자를 무시할 수 있음
• 모든 선택자가 동일한 명시도를 갖게 되는 부작용

:is(h1, h2:maybe-unsupported, h3) {
  font-family: sans-serif;
}

 

중첩 선택자 ( & )

• CSS 중첩을 사용할 때 부모와 자식 규칙 사이의 관계를 명시적으로 나타냄

.parent-rule {
  /* 부모 규칙 속성 */
  :hover {
    /* 자식 규칙 속성 */
  }
}

/* 브라우저는 위 중첩된 규칙을 다음과 같이 파싱합니다. */
.parent-rule {
  /* 부모 규칙 속성 */
}

.parent-rule *:hover {
  /* 자식 규칙 속성 */
}

.parent-rule {
  /* 부모 규칙 속성 */
  &:hover {
    /* 자식 규칙 속성 */
  }
}

/* 브라우저는 위 중첩된 규칙을 다음과 같이 파싱합니다. */
.parent-rule {
  /* 부모 규칙 속성 */
}

.parent-rule:hover {
  /* 자식 규칙 속성 */
}

 

 

가상 클래스

:link - 방문하지 않은 링크에 스타일 적용
:visited - 방문한 링크에 스타일 적용
:hover - 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용
:active - 웹 요소를 활성화했을 때의 스타일 적용
:focus - 웹 요소에 초점이 맞춰졌을 때의 스타일 적용

 

UI 요소 상태에 따른 가상 클래스

:enabled - 요소를 사용할 수 있을 때의 스타일 지정
:disabled - 요소를 사용할 수 없을 때의 스타일 지정
:checked - 라디오 박스나 체크 박스에서 해당 항목을 선택했을 때의 스타일 지정

 

구조 가상 클래스

:root - 문서 안의 루트 요소에 스타일 적용 (html 문서의 경우 html 요소가 루트)
:nth-child(n) - 앞에서부터 n번째 자식 요소에 스타일 적용
:nth-last-child(n) - 끝에서부터 n번째 자식 요소에 스타일 적용
:nth-of-type(n) - 앞에서부터 n번째 항목에 스타일 적용
:nth-last-of-type(n) - 끝에서부터 n번째 항목에 스타일 적용
:first-child - 첫 번째 자식 요소에 스타일 적용
:last-child - 마지막 자식 요소에 스타일 적용
:first-of-type - 형제 관계인 요소 중 첫 번째 요소에 스타일 적용
:last-of-type - 형제 관계인 요소 중 마지막 요소에 스타일 적용
:only-child - 부모 안의 자식 요소가 유일하게 하나일 때 스타일 적용
:only-of-type - 해당 요소가 유일한 요소일 때 스타일 적용

 

그 외 가상 클래스

:target - 앵커(같은 문서 안에서 다른 위치로 이동) 목적지에 스타일 적용하기
:not - 특정 요소가 아닐 때 스타일 적용

/* id가 ex가 아닌 모든 p 요소의 색상을 파란색으로 적용 */
p:not(#ex) {
  color: blue;
}

 

가상 요소

::first-line - 지정한 요소의 첫번째 줄에 스타일 적용
::first-letter - 지정한 요소의 첫번째 글자에 스타일 적용
::before - 특정 요소의 내용 앞에 콘텐츠 추가
::after - 특정 요소의 내용 뒤에 콘텐츠 추가

li.hot::after {
  content: "NEW!!";
  font-size: x-small;
  color: #fff;
  background#f00;
}​

---

2.  XPath

• XML 문서 탐색을 위해 설계됨
• CSS Selector로는 불가능하거나 매우 복잡한 탐색 기능을 제공
• 주요 사용 시점

1. 요소의 ID나 Class가 불안정하거나 없고
2. 텍스트를 기준으로 찾거나
3. 현재 요소의 주변 요소(부모, 형제)를 역추적해야 할 때

 

구문

nodename	이름이 nodename인 모든 노드 선택
/	루트 노드에서 선택
//	현재 노드부터 시작해 일치하는 모든 노드를 선택
.	현재 노드 선택
..	현재 노드의 부모 선택
@	속성 선택

 

와일드카드

*	모든 엘리먼트 노드와 일치
@*	모든 속성 노드와 일치
node()	모든 종류의 노드와 일치 (엘리먼트, 속성, 텍스트, 주석 등)

 

여러 경로 선택

| - 여러 경로를 선택(and)

 

XPath 축(Axes)

ancestor	현재 노드의 모든 조상(부모, 할아버지 등)을 선택
ancesotr-or-self	현재 노드의 모든 조상과 현재 노드 자신을 선택
attribute	현재 노드의 모든 속성을 선택
child	현재 노드의 모든 자식을 선택
descendant	현재 노드의 모든 하위(자식, 손자 등)를 선택
descendant-or-self	현재 노드의 모든 하위와 현재 노드 자신을 선택
following	현재 노드의 닫는 태그 이후 문서에 있는 모든 것을 선택
following-sibling	현재 노드 뒤에 있는 모든 형제를 선택
namespace	현재 노드의 모든 네임스페이스 노드를 선택
parent	현재 노드의 부모를 선택
preceding	조상, 속성 노드, 네임스페이스 노드를 제외하고, 문서 내에서 현재 노드 앞에 나타나는 모든 노드를 선택
preceding-sibling	현재 노드 앞에 있는 모든 형제를 선택
self	현재 노드 자신을 선택

 

XPath 연산자(Operators)

|	두 노드 집합을 계산
+	덧셈
-	뺄셈
*	곱셈
div	나눗셈
=	같음
!=	같지않음
<	작음
<=	작거나같음
>	큼
>=	크거나같음
or	또는(논리합)
and	그리고(논리곱)
mod	나머지 연산