CSS selector

💊 CSS selector

📕 요소, 클래스, id 선택자

• Type(요소) : HTML 태그 직접 지정

p {
  color : red;
}

• class : class 선택 (.)

.className {
  color : red;
}

• ID : ID 선택 (#)

#IdName {
  color : red;
}

📗 자식, 자손, 형제 선택자

• 자식 선택자 (>)

parent > child {
  color : red;
}

자손 선택자 (공백)

parent descendant {
  color : red;
}

형제 선택자 (+,~)

.name ~ li { // 클래스명이 name부터 li까지
  color : red;
}

.name + li { // 클래스명이 name 바로 다음에 있는 li
  color : red;
}

📘 구조적 가상 클래스

:first-child : ~의 첫번째 요소
:last-child : ~의 마지막 요소
:nth-child(n) : ~의 n번째 요소

📙 동적 가상 클래스

:hover : 마우스 커서가 요소 위에 올라가 있을 때
:focus : 요소를 클릭하거나, 탭키로 요소를 선택하여 요소가 포커스 됬을 때
:active : 마우스를 누르는 순간부터 떼는 순간까지.

📌 선택자 우선순위

🔎 우선순위가 같을 경우에는 기본적으로 css는 나중에 선언된 것이 우선순위다.

🔎 우선순위는 점수를 합산하여 우선순위를 판단한다.
(올림픽 메달 획득에 따른 우승팀을 뽑는 것과 같다고 생각하면 좋다.)

1위 (금메달) : ID 선택자
2위 (은메달) : class, 가상 클래스 선택자
3위 (동메달) : type (html 태그) 요소 선택자

😱 주의 사항 😱
📎 우선순위를 무시하는 것들

• !importent : 무조건 우선순위다. 다른 우선순위 무시
• inline style : 태그 안에 직접적으로 쓴 스타일 태그(권장하지 않음)

참고

김버그의 css는 재밌다.