cypress를 보다가 query selector에 대한 내용이 자세히 나오길래 조금 끄적해본다.
attribute selector는 쓸때마다 항상 헷갈려서 자주 자주 읽어줘야겠다.

입사 후 몇 달만의 블로그인지..

CSS Selectors

Basic selectors

Universal selector

• Universal Selector(*)는 모든 요소를 선택한다.
  • ns|* - 네임스페이스 ns 안의 모든 요소 선택
  • *|* - 모든 요소 선택
  • |* - 네임스페이스 없는 모든 요소 선택

namespace example

@namespace svg url(http://www.w3.org/2000/svg);

svg | a {
	/* 모든 svg <a> 요소와 일치한다 */
}

*|a {
	/* 전체에서의 <a> 요소와 일치한다. */
}

Type selector

• node name과 일치하는지의 여부를 통해 element를 선택한다.
• <input> 은 input과 일치한다.

Class selector

• class attribute와 일치하는 element를 선택한다.
• .classname 문법을 사용해서 .index classname이 index인 element를 선택한다.

ID selector

• id attribute를 기반으로 element를 가져온다.
• 주어진 id에 대응되는 하나의 element 만이 선택된다.
• #idname 을 사용하여 #toc toc이라는 id를 attribute로 가지고 있는 element를 선택한다.

Attribute selector

• 주어진 attribute에 기반하여 일치하는 모든 elements를 가져온다.
• [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] 등의 문법을 사용한다.

example

a[title] {
	/* <a> element 중에 title attribute를 가지고 있는 elements */
}

a[href="https://example.org"] {
	/* <a> element 중에 href가 https:~~ 와 정확히 일치하는 elements */
}

a[href*="exmaple"] {
	/* <a> element 중에 href가 "example" 을 포함하고 있는 elements  */
}

a[href$=".org"] {
	/* <a> element의 href가 ".org"로 끝나는 elements */
}

a[class~="logo"] {
	/* <a> element 중에 class가 "logo"를 포함하고 있는 elements  */
}

a[href~="exmple"] {
	/* <a> element 중에 공백으로 구분되어 있는 word가 "example" 정확히 일치하는 elements */
}

a[lang|=en] {
	/* <a> element 중에 lang attribute의 값이 "en"으로 시작하거나 "en-"으로 시작하는 elements */
}

Grouping selectors

selector list

• ,를 통해 list를 구성한다.

Combinators

Descendant combinator

• 공백을 통해 하위에 있는 요소로 내려간다.
• 바로 하위 자식이 아니어도 상관없음
• 상위 요소가 있는 경우 두번째 선택기를 통해 일치하는 요소를 선택한다.

child combinator

• > 키워드를 통해 첫번째 요소의 바로 아래 자식을 선택한다.
• 두번째 선택자의 바로 위의 부모가 첫번째 선택자인지 확인한다.

General sibling combinator

• ~ 키워드를 통해 첫 번째 선택자 뒤에 오는 두 번째 선택자 elements 들을 선택한다.

Adjacent sibling combinator

• + 키워드를 통해 첫번째 element 바로 뒤에 오는 두번째 element를 선택한다.

Pseudo

Pseudo classes

• : 는 document tree에 포함되지 않은 상태 정보를 기반으로 element를 선택한다.
  ex) a:visited
• ::는 HTML에 포함되지 않은 element를 나타낸다.
• 슈도 클래스, 엘리먼트는 더 할 말이 많고 해당 글에 다 담을 수 없기 때문에 추후에 다시 정리 해야겠다.

마치며

attribute selector는 항상 볼때마다 헷갈리는데 DOM 탐색시 자주 사용해야 하는 cypress에서 쓰려니 좀 더 알아두면 좋겠다는 생각이 들었다.

---

참고
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_attribute_value_lang