CSS 에서 요소를 선택하는 다양한 방법에 대해 알아봅시다.
기본적인 셀렉터
태그, 아이디, 클래스를 기준으로 요소를 가리킵니다.
태그이름: 해당 태그를 가진 모든 요소를 선택#myID: 해당 아이디를 가진 요소를 선택.myClass: 해당 클래스명을 가진 모든 요소를 선택
어트리뷰트 셀렉터
요소가 갖는 속성을 이용하여 선택할 수도 있습니다.
tag[attr]: 해당 속성을 갖는 모든 tag 요소를 선택tag[attr="value"]: 해당 속성의 값이 value 인 모든 tag 요소를 선택tag[attr*="value"]: 해당 속성의 값에 value 가 포함된다면 그 tag 요소를 선택
가족 관계
요소들 사이에는 계층 관계가 존재합니다.
윗 계층 요소는 바로 아래 계층 요소의 부모가 되며, 아래 계층 요소는 그의 자손의 됩니다.
n 계층 아래의 요소는 후손이라고 부르며, 동일한 계층에 존재하면 형제가 됩니다.
<body>
<h1>Hello</h1>
<h2>Hi</h2>
<div>
<span>
<p>Nice</p>
</span>
</div>
</body>- body : 부모
- 자손 : h1, h2, div
- 후손 : h1, h2, div, span, p
위처럼 부모-자손-후손 관계가 성립합니다.
동등한 계층에 존재하는 요소끼리는 형제 관계가 성립합니다.
h1, h2, div 가 서로 형제입니다.
body > div: 후손이 아닌 자손만을 선택합니다.body div: 자손과 후손을 모두 포함하여 body 의 아래 계층인 div 를 선택합니다.div + h2: div 와 형제 관계인 h2 를 선택합니다.
가상 셀렉터
요소가 특정 상태에 속할 때 선택하거나, 요소의 특정 부분을 선택하는 방법도 있습니다.
: 을 이용하여 상태를 서술하고, :: 을 이용하여 요소의 부분을 선택합니다.
tag:status: 해당 상태에 있는 tag 요소를 선택tag::element: tag 의 특정한 element 를 선택
상태
동적 셀렉터의 예시입니다.
:hover: 요소 위에 마우스를 올렸을 때:active: 요소를 클릭했을 때:visited: 링크를 방문했을 때:link: 링크를 방문하지 않았을 때:focus: 요소를 클릭 / 키보드로 선택했을 때 (포커스했을 때)
요소 순서, 구조에 따른 셀렉터의 예시입니다.
:first-child: 그 요소 중 첫 번째 자식인 것을 선택:last-child: 그 요소 중 마지막 자식인 것을 선택:nth-child(n): 그 요소 중 n 번재 자식인 것을 선택div > span:nth-child(2n+1): div 의 자손인 span 중 홀수번째(1, 3, 5...)인 것만을 선택
부정 셀렉터도 존재합니다.
:not(selecotor): 셀렉터에 해당하지 않는 모든 요소를 선택div:not([class*="hello"])a:not(:visited)
form 이나 input 요소 등 사용자 입력을 받는 경우 입력값이 유효한지 아닌지 판단하는 상태도 있습니다.
:valid: 유효:invalid: 유효하지 않음
요소
tag 내부의 컨텐츠를 :: 로 세부화하여 선택할 수 있습니다.
::first-letter: 해당 요소의 컨텐츠에서 첫 글자를 선택::first-line: 컨텐츠의 첫 줄을 선택::selection: 컨텐츠를 드래그했을 때
기록용 블로그 + 오류가 있을 수 있습니다🔥