유블로그

[CSS] css 선택자 및 우선순위 본문

html&css

[CSS] css 선택자 및 우선순위

yujeong kang 2020. 9. 20. 15:39
  선택자 의미 사용법
일반 선택자 전체 선택자 HTML 문서 내 모든 element 선택 * { }
타입 선택자 매칭되는 element 선택 h1, h2, h3 { }
클래스 선택자 class 속성 값과 매칭되는 element 선택 .className { }
ID 선택자 id 속성 값과 매칭되는 element 선택 #idName { }
복합 선택자 하위 선택자 하위 element 선택 E1 E2 { }
자식 선택자 직속 하위 element 선택 E1 > E2 { }
인접 형제 선택자 인접 형제 관계인 element 선택 E1 + E2 { }
일반 형제 선택자 형제 관계인 element 선택 E1 ~ E2 { }

 

- 일반선택자 우선 순위

전체 선택자 < 타입 선택자 < 클래스 선택자 < ID 선택자

 

- 하위 선택자 E1 E2 { } : E1의 하위에 있는 모든 E2에(모든 후손들에) 적용됨

ex ) div p {   }

<body>
    <div>div Descendant Selector div
        <p>div > p Descendant Selector p</p>	<!-- 여기 적용됨 -->
        <div>div div Descendant Selector
            <span><div>
                <ul>
                    <li><p>div p Descendant Selector</p></li>  <!-- 여기 적용됨 -->
                </ul>
            </div></span>
        </div>
    </div>
</body>

 

- 자식 선택자 E1 > E2 { } : E1의 1단계 하위 요소들에게(모든 자식들에) 적용됨.

ex ) div > p {   }

<body>
    <div>div Descendant Selector div
        <p>div > p Descendant Selector p</p>	<!-- 여기 적용됨 -->
        <div>div div Descendant Selector
            <span><div>
                <ul>
                    <li><p>div p Descendant Selector</p></li>  <!-- 여기 적용 안 됨 -->
                </ul>
            </div></span>
        </div>
    </div>
</body>

 

- 인접 형제 선택자 E1 + E2 { } : E1 바로 뒤에 위치하는 E2에 적용

ex) h1 + h2 { }

<body>
      <h1> header1 </h1>
      <h2> header2 </h2>	<!-- 여기만 적용됨 -->
      <h2> header2 </h2>
</body>

 

- 일반 형제 선택자 E1 ~ E2 { } : E1 뒤에 위치하는 모든 E2에 적용

ex) h1 ~ h2 { }

<body>
    <h1> header1 </h1>
    <h2> header2 </h2>	<!-- 적용됨 -->
    <h2> header2 </h2>	<!-- 적용됨 -->
    <div>
        <h2>안녕1</h2>	<!-- 여기는 h1 하위의 div 하위에 h2 있으니까 적용 안 됨 -->
    </div>
</body>

 

 

- 가상 클래스 선택자

: first-child 부모의 첫 번째 자식 선택
: last-child 부모의 마지막 자식 선택
: nth-child(n) 부모의 n번째 자식 선택
: hover 지정된 요소에 마우스가 올라간 경우 선택
: checked 지정된 요소가 checked인 경우 선택

 

 

- 속성 선택자 요소

선택자 의미
[A] A 속성이 포함된 엘리먼트 선택
[A=V] A 속성 값이 V와 정확히 일치하는 엘리먼트
[A~=V] A 속성 값이 V 단어(스페이스로 구분되어 있어야 함) 를 포함하는 엘리먼트
[A^=V] A 속성 값이 V로 시작하는 엘리먼트
[A*=V] A 속성 값이 V를 포함하는 엘리먼트
[A$=V] A 속성 값이 V로 끝나는 엘리먼트
[A|=V] A 속성 값이 정확히 V이거나, V-로 시작하는 엘리먼트

 

- CSS 규칙 적용 우선순위

  • 여러 개의 css 적용된 경우 마지막 규칙, 구체적인 규칙, !important가 우선 적용됨
  • 하단에 작성한 규칙이 마지막 규칙이다.
  • p {} 보다 p b{} 가 구체적이니까 p b { } 적용됨
  • p b { color: green !important; } 이렇게 !important 적어 주면 같은 엘리먼트에 대해 우선 적용
저작자표시 비영리 변경금지

'html&css' 카테고리의 다른 글

[HTML] img 태그  (0) 2020.09.20
[HTML] table 태그  (0) 2020.09.20
[CSS] display, float 속성  (0) 2020.09.20
[CSS] css 적용방식  (0) 2020.09.20
'html&css' Related Articles more