[CSS] CSS Selector

CSS Selector

HTML태그 3.텍스트 ~ 6.테이블관련 까지만 읽어도 해당 포스트를 이해하는데 문제는 없다.

 

시작 태그에는

id, class, attr가 존재하거나 태그명만 있는 경우가 있다.

위 4개 항목을 통해 Element를 선택할 수 있다.

 

기존 css에서 엘리먼트를 선택하는 방법은 아래와 같다.

- tag이름 : span
- id : #id
- class : .class
- attr : [value="val"]

 

HTML로 살펴보자

<style>

span{color : blue}
#id{color : green}
.class{color : red}
[value="val"]{color : brown}

</style>


<span> span </span>
<p id="id"> p_id </p>
<p class="class"> p_class </p>
<p value="val"> p_val </p>

style 태그 내부에 사용한 것이 CSS Selector 이다.

 

1.1 CSS Selector HTML 결과

n번째 선택

위 css selector 뒤에 :nth-child(n) 이 붙는다. n은 n번째를 의미한다.

주의해야할 점은 css selector로 선택한 element중에서 n번째가 아닌,

n번째 element중에서 css selector로 선택한 element 이다.

 

<style>

.cl:nth-child(2){color : red}

</style>


<div>
<p class="cl"> p_class1</p>
<p class="cl"> p_class2</p>
<p class="cl"> p_class3</p>
</div>

<div>
<p class="cl"> p_class5</p>
<p> p </p>
<p class="cl"> p_class6</p>
<p class="cl"> p_class7</p>
</div>

위 코드에서 p_class2는 색이 변했지만, p_class6은 변하지 않았다.

p_class2 는 첫번째 div 태그 내에서 두번째 element지만, p_class6는 두번째 div 태그 내에서 세번재 element이기 때문이다.

1.2.1 n번째 선택 HTML 결과

계층적 선택

태그 계층적으로 선택할 수 있다.

.cl > p : cl class 바로 아래 계증에 있는 p 태그 선택
.cl p : cl class 아래 포함된 모든 p 태그 선택

 

<style>

.cl > p {color : red}
.cl2 p {color : red}

</style>

<div class="cl">

    <p> p_class1</p>
    <div>
        <p> p_class2</p>
    </div>
    
</div>

<div class="cl2">

    <p> p_class1</p>
    <div>
        <p> p_class2</p>
    </div>
    
</div>

1.3.1 계층적 선택 HTML 결과

 

 

여러 개 선택

여러 개를 선택하는 데에는 두 가지가 있다.

전체 중에서 일부를 제외하는 방법과 직접 여러 개를 선택하는 방법이다.

 

전체중에서 일부를 제외하는 방법은 아래와 같다.

:not(.class)

직접 여러 개를 선택하는 방법은 아래와 같다.

.cl1, .cl2

 

<style>

.cl:not(.cl1) {color : red}
#id1, #id3 {color : red}

</style>

<p class="cl cl1">class1<p>
<p class="cl cl2">class2<p>
<p class="cl cl3">class3<p>
<p class="cl cl4">class4<p>

<p id="id1">id1<p>
<p id="id2">id2<p>
<p id="id3">id3<p>
<p id="id4">id4<p>

1.4.1 여러 개 선택 HTML 결과