🧡 CSS Selector
CSS속성 스타일을 적용할 대상(html 요소)을 선택하는 방법을 말합니다.
복수 개의 셀렉터를 연속하여 지정할 수 있고, (,) 쉽표로 구분합니다.
💚 기본 셀렉터
* (전체 셀렉터)
: 문서의 모든 요소를 선택합니다.
h1, div..(태그 셀렉터)
: 같은 태그명을 가즌 모든 요소를 선택합니다. 복수로도 선택할 수 있습니다.
#id(id셀렉터)
: id 어트리뷰트 값을 지정하여 선택합니다.
.class(class 셀렉터)
: 재사용측면에서 유용합니다.
attribute 셀렉터
셀렉터 [attribute]: 같은 속성을 가진 요소를 선택합니다.(a[href] : a 요소 중 href 속성을 갖는 모든 요소 선택)셀렉터 [attribute = "속성값"]: 같은 속성을 가지고 속성값(단어, 이하 'ab')도 일치하는 모든 요소를 선택합니다.셀렉터 [attribute ~= "ab"]: 지정된 요소 중 같은 속성을 가지고, “ab”단어를 포함하는 요소를 선택합니다. (h1[title ~= “first”] h1 요소 중에 title 속성 값으로 “first”단어를 포함하는 요소를 선택) → 여러 단어를 포함하는지 값으로 하고 싶을 때는 공백으로 분리합니다.셀렉터 [attribute |= "ab"]: 지정된 요소 중 속성 “ab”이 일치하거나 “ab~”으로 시작하는 요소를 선택셀렉터 [attribute ^= “ab”]: 지정된 요소 중 속성이 “ab~”으로 시작하는 요소를 선택셀렉터 [attribute $=“ab”]: 지정된 요소 중 속성이 “~ab”으로 끝나는 요소를 선택셀렉터 [attribute *= "ab"]: 지정된 요소 중 속성에 “ab”을 포함하는 요소를 선택
💚 자식/후손/형제 셀렉터(복합 셀렉터)
자식 셀렉터 div > p
: 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택합니다. ( : 파랑p, 노랑p만 선택)
후손 셀렉터 div p
: 자식의 자식인 요소까지 모두 선택됩니다. ( : div의 후손요소 파랑p, 노랑p, 분홍p, 초록p 모두 선택 )
형제 셀렉터 h2 ~ p
: 같은 부모 요소를 공유하면서, 첫번쨰 입력한 요소 뒤에 오는 두번쨰 입력한 요소를 모두 선택합니다. ( : h2의 형제요소 중 h2 뒤에 있는 p모두 선택 → 파랑p, 노랑p 선택)
인접 형제 셀렉터 h2 + p
: 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소를 선택합니다.( : h2 바로 뒤에 위치한 파랑p만 선택, 사이에 다른 요소가 존재하면 선택되지 않습니다.)
🤍 가상 클래스 셀렉터
- 요소의 상태정보에 기반해 요소를 선택합니다. 마침표 대신
:(콜론)을 사용하며, CSS에 미리 정의된 이름이 있습니다. (임의의 이름 X) - 마우스가 올라와 있을 때, 방문했을 때, 포커스가 들어와 있을 때... 같은 특정 상태를 말합니다. 이러한 특정상태를 임의로 지정하여 선택하는 방법입니다.
:hover
: 마우스가 올라와 있을 때 변화를 줍니다. (ex. a:hover { color : red; } → a 요소가 hover 상태일 때 글자색을 빨강으로 바꿉니다.)
:link
: 방문하지 않은 링크일 때 효과를 지정합니다.
:visited
: 방문한 링크일 때 효과를 지정합니다.
:active
: 클릭된 상태일 때 효과를 지정합니다.
:focus
: 포커스가 들어와 있을 때 효과를 지정합니다. text-input에 많이 사용됩니다.
🤍 UI 요소 상태 셀렉터
:checked: 체크 상태일 때:enabled: 사용 가능한 상태일 때:disabled: 사용 불가능한 상태일 때
🤍 구조 가상 클래스 셀렉터
:first-child
해당하는 모든 요소 중 첫번째 자식인 요소를 선택합니다. (p:first-child : 자식들 중 첫번째 p인 분홍p 초록p 선택)
:last-child
해당하는 모든 요소 중 마지막 자식인 요소를 선택합니다. (p:last-child : 마지막 자식인 분홍p 노랑p , 초록p 선택)
(자식 엘리먼트가 하나뿐인 경우에는 last/first 둘 다 적용된다.)
:nth-child(n)
n번째 자식이면서 해당하는 요소를 선택 (n은 서수의 개념으로, 2n+1 = 홀수만 선택)
:nth-last-child(n)
뒤에서 n번째 자식이면서 해당하는 요소를 선택합니다.
:first-of-type
해당하는 요소의 부모요소의 자식요소 중 첫번째 등장하는 요소를 선택합니다.
🤍 부정 셀렉터
:not(셀렉터): 해당하는 요소 중에서 셀렉터에 해당하지 않는 모든 요소를 선택합니다.
🤍 정합성 확인 셀렉터
:valid(셀렉터): 정합성 검증이 성공한 input요소 또는 form 요소를 선택합니다.:invalid(셀렉터): 정합성 검증이 실패한 input요소 또는 form 요소를 선택합니다.
🤍 가상 요소 셀렉터
::(이중 콜론)을 사용합니다.::first-letter: 콘텐츠의 첫 글자를 선택한다.::first-line: 콘텐츠의 첫 줄을 선택한다. (블록 요소에만 적용 가능)::after: 콘텐츠 뒤에 위치하는 공간을 선택한다. (content 프로퍼티와 함께 사용되는 것이 일반적)
💚 선택자 우선순위
!important (속성 기준 가장 우선)
무조건 가장 우선한다. 하지만 수정의 경우 이전의 !important를 모두 찾아 변경해야 하므로 사용을 지양한다.
인라인 스타일 (HTML문서에 style=" ", 요소기준 가장 우선)
이 경우 해당 스타일을 우선하기 때문에 같은 태그에 다른 스타일을 적용할 때 한 번 더 확인해야 하므로 유지보수가 어렵다.
id 선택자 (# id , 100점)
class 선택자 ( . class , 10점)
속성 기반 선택자(a[href="#"] , 10점)
가상 클래스(a:hover , 10점)
가상 요소(span::after , 10점)
태그 선택자 (1점)
전체 선택자 (* , 0점)
-
만약 점수가 같다면, 가장 마지막에 작성된 코드가 우선한다!
-
동일 요소에게 동일 속성을 뒤에서 다른 값으로 재정의 한 경우에도 재정의한 값(가장 마지막 코드)이 우선한다.
-
복합 선택자를 사용하는 경우, 선택자 방식의 정해진 점수를 합산하여 우선순위를 정한다.
