[CSS] CSS Selector

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

전체 셀렉터

* { }

태그 셀렉터

h1 { }
p { }

section, h1 { } <!-- 섹션과 제목태그 두개다 셀렉합니다 -->

ID 셀렉터

#ID { }

class 셀렉터

.class { }

attribute 셀렉터

a[href] { } <!-- a태그 href속성을 가진 요소를 선택합니다. -->
p[id="ID"] { } <!-- p태그 ID라는 id를 가진 요소를 선택합니다. -->

자식 셀렉터

header > p { }

header태그 바로 아래 p태그 자시만 선택이 됩니다.

<header>
  <p>
    <!-- 선택 -->
    <span>
        <p>
            <!-- 선택X -->
          </p>
     </span>
 </p>
</header>

후손 셀렉터

header p { }

header태그 아래 자식 p태그뿐만 아니라 자식의 자식의 p태그까지 선택이 됩니다.

<header>
  <p>
    <!-- 선택 -->
    <span>
        <p>
            <!-- 선택 -->
          </p>
     </span>
 </p>
</header>

형제 셀렉터

section ~ p { }

같은 부모요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 모두 선택합니다.

<header>
    <section></section>
    <p></p> <!-- 선택 -->
    <p></p> <!-- 선택 -->
    <p></p> <!-- 선택 -->
</header>

인접 형제 셀렉터

section + p { }

같은 부모요소를 공유하면서, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소만 선택합니다.

<header>
    <section></section>
    <p></p> <!-- 선택 -->
    <p></p> 
    <p></p> 
</header>

가상셀렉터는 다음 링크를 참고해주세요

[CSS 기본부터 활용까지 - 가상클래스 선택자

본 게시글은 인프런 강의 "CSS 기본부터 활용까지"를 보고 공부한 내용을 정리하고 있습니다. https://www.inflearn.com/course/css-%EA%B8%B0%EB%B3%B8%EB%B6%80%ED%84%B0-%ED%99%9C%EC%9A%A9%EA%B9%8C%..

자식셀렉터와 후손 셀렉터의 차이는 무엇인가?

A > B {} 이라고 하자.
이럴 경우 부모A 바로 아래 있는 자식 B태그만 영향을 받는다.
자식의 자식에 태그B가 있어도 영향을 받지 않는다.

A B { } 로 후손 셀렉터 꼴일 경우,
부모A태그 바로 아래 자식B 태그도 영향을 받고,
자식의 자식 B태그도 영향을 받는다.

티스토리툴바