[CSS] 기본 선택자 종류 및 우선 순위

기본 선택자 종류

 

1. 전체 ( * ) : 전체 선택자로 각각의 모든 요소에 대한 속성을 지정

전체 선택자 ' * '

---

2. important ( !important ) : 동일 요소에 적용되는 다른 규칙보다 우선 / style 뒤에 공백(space) 후 !important 를 추가

최우선 적용 ' !important '

---

 

3. 타입 ( tagName ) : HTML 태그를 지정하여 선언

타입 선택자 ' tagName '

---

 

4. 클래스 ( .className ) : 하나의 웹페이지에 다양하게 사용 가능 / html 문서에서 속성값을 두 개 이상 가질 수 있음

불특정 다수의 꾸밈을 줄 때 주로 사용

클래스 선택자 ' .className '

---

5. 아이디 ( #idName) : 선택자에 고유한 이름을 부여하여 한 페이지에 하나의 이름으로만 존재, 요소에 대해 유일한 특성을 정의할 때 / 자바스크립트로 해당 요소를 조작할 때

아이디 선택자 ' #idName '

---

 

6. 자식 ( li > a) : 기준 선택자의 자식으로 존재하는 선택자를 직접 지정 (li 내부에 자식으로 존재하는 a에만 적용)

자식 선택자 : 기준 선택자의 직계 자식으로 존재하는 선택자

• id="text1" 을 가지고 있는 선택자 내부에 자식으로 존재하는 <strong> 태그에만 적용

---

 

7. 하위 자손 ( p a ) : 기준 선택자의 하위(자식, 자손) 선택자에 지정할 때 사용 / 공백(space) 으로 구분함.

ID, CLASS 선택자와도 함께 사용 가능(p 내부에 존재하는 모든 a에 적용)

---

 

8. 종속 ( div.Name) : 일반 요소 선택자에 클래스 혹은 아이디 선택자를 구체적으로 지정. 띄어쓰기 없이 붙여서 작성

---

 

9. 일반형제 ( h1~p ) : 형제 관계의 뒤쪽에 위치하는 선택자 전체(모든 동생 요소)에 적용 / (h1 뒤에 존재하는 p 전체 적용)

---

 

10. 인접형제 ( h1 + p ) : 인접해 있는 두 개의 동등한 위치(형제관계)에 있는 뒤쪽 선택자에 적용 (h1 뒤에 존재하는 p에만 적용)

---

css 우선 순위

같은 이름이나 종류의 선택자인 경우

• 위에서 아래로 순차적으로 적용되고 마지막에 선언된 스타일이 우선 순위를 갖는다.

위에 blue, auqa 값은 무효 / 가장 아래가 우선 적용

---

같은 선택자가 아닌 다른 종류 선택자인 경우

• !important > 직접 선언(in-line) > #id(5) > .class(3) > type(1) 순으로 우선 순위를 갖는다.

!important > 직접 선언(in-line) > #id(5) > .class(3) > type(1)

---

다른 종류의 선언문이며 같은 선택자인 경우

• 직접 선언(in-line) > 내부 선언 > 외부 선언 순으로 우선 순위를 갖는다.

외부 선언 .css 파일

내부 선언 <style></style>

직접 선언 in-line

---