[CSS] CSS 연결 선택자, 속성 선택자, 가상 클래스

✅ CSS 연결 선택자

연결 선택자는 둘 이상의 선택자를 연결해서 스타일이 적용될 요소가 어느 부분인지 지정합니다. 선택자를 둘 이상 조합하므로, ‘조합 선택자’라고도 하고, ‘콤비네이션 선택자’ 라고도 부릅니다.

📌 하위 선택자

기본형 : 상위요소 하위요소

section p { ... }	/	div p { ... } 등

부모 요소에 포함된 하위 요소를 모두 선택하여 스타일을 적용합니다. 공백으로 상위요소와 하위요소를 구분합니다.

See the Pen css by username (@username) on CodePen.

📌 자식 선택자

기본형 : 부모요소 > 자식요소

section > p { ... }	  /   div > p { ... } 등

하위 선택자와 다르게 자식요소에만 스타일을 적용하는 선택자입니다. 두 요소 사이에 ‘>’ 기호를 표시해 부모요소와 자식요소를 구분합니다.

See the Pen css by username (@username) on CodePen.

📌 인접 형제 선택자

기본형 : 요소1 + 요소2

형제 요소 중에서 첫 번째 동생 요소만 선택하는 선택자입니다. 인접 형제 선택자를 정의할 때는 요소1과 요소2 사이에 ‘+’기호를 표시합니다.

h1 + p { color : blue; } // h1의 형제인 p요소중 첫번째 p

See the Pen css by username (@username) on CodePen.

📌 형제 선택자

기본형 : 요소1 ~ 요소2

형제 요소의 스타일을 정의하는 선택자입니다. 요소1과 형제인 요소2를 전부 선택하여 스타일을 정의하고, 요소1과 요소2 사이에 ‘~’기호를 표시합니다.

h1 ~ p { color : blue; }

See the Pen css by username (@username) on CodePen.

✅ CSS 속성 선택자

HTML태그를 작성 할 때 여러 속성을 함께 사용하는데 속성값에 따라 원하는 요소를 선택할 수도 있습니다. 이를 [속성] 선택자 라고하는데, 대괄호 ‘[ ]’ 사이에 원하는 속성을 입력해서 사용합니다.

📌 [속성] 선택자

기본형 : 요소[속성]

a[href] { ... } // a요소 중에서 href 속성이 있는 요소 선택

See the Pen css by username (@username) on CodePen.

📌 [속성=속성값] 선택자

기본형 : 요소[속성 = 속성값]

주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정할 때 사용합니다. 대괄호안에 속성과 속성값을 넣고 그 사이에 ‘=’ 기호를 표시합니다.

a[target=_black] { ... } // <a target = "_blank"> 인 요소

See the Pen css by username (@username) on CodePen.

✅ 가상 클래스 선택자

사용자의 동작에 반응하는 선택자!

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

구조 가상 클래스

nth-child(n) : 부모 안에있는 모든 요소중에서 n번재 자식요소를 선택