[CSS] CSS의 선택자 한번에 정리해버리기/CSS 태그 선택

CSS 선택자

 

 

CSS은 다양한 선택자 기능을 제공한다. 크게는 태그명을 이용한 선택, class명을 이용한 선택, id명을 이용한 선택 등이 있지만, 편의를 위한 선택 기능들을 제공한다.

 

오늘 CSS에서 많이 사용되는 선택자들을 모두 정리해버린다.

 

기본 선택자

 

태그 선택

 

태그명{ /CSS 코드 내용/}

 

HTML의 태그명으로 CSS을 적용한다. 해당 태그명을 가진모든 요소를 선택한다.

 

클래스 선택자

 

.class명{ /*CSS 코드 내용*/}

 

class이름을 class의 값으로 가지는 모든 태그를 선택한다.

 

 

아이디 선택자

 

#id명{ /CSS 코드 내용/}

 

id이름을 id값으로 가지는 모든 태그를 선택한다.

*한 페이지 내에서 id값은 고유하여야한다.

 

기본 속성 선택자

 

[속성]{ /CSS 코드 내용/}

[속성=값]{ /CSS 코드 내용/}

 

html태그 중 해당 속성과 일치하는 요소를 선택한다.

 

 

속성 선택 예시)

    <button type="button">버튼A</button>

    <button type="submit">버튼B</button>

 

 

[type="button"]{

    background-color: red;

}

 

속성 선택자

---

 

예시2) class선택자 + 속성 선택자

.className[href = “/”]{ /CSS 코드 내용/}

 

    <a class="className" href="/">

        Hello

    </a>

    <a href="className">

        Bye

    </a>

 

.className[href="/"]{

    background-color: red;

}

 

클래스 선택자

---

결합자

 

결합자는 앞서 언급한 선택자들을 결합하여 사용할 수 있게 해준다.

 

그룹 선택자

 

선택자1, 선택자2, 선택자3{ /CSS 코드 내용/}

 

여러 선택자를 하나의 그룹으로 묶을 때 사용한다. { /CSS 코드 내용/}를 그룹으로 묶인 모든 선택자의 요소에 적용한다.

 

자식 선택자

 

부모 선택자 > 자식 선택자{ /CSS 코드 내용/}

 

자식 선택자는 부모 요소 하위에 있는 자식 요소를 선택한다. 자손(깊이가 2이상) 요소는 선택하지 않는다.

 

자식 선택자 예시)

    <div class="parent">

        <h1>hello</h1>

        <h1>hello2</h1>

        <h2>hi</h2>

    </div>

 

.parent > h1{

    background-color: red;

}

자식 선택자

---

 

하위 선택자

 

선택자1 선택자2{ /CSS 코드 내용/}

 

선택자의 범위를 특정 부모 요소(선택자 1)의 하위 요소(자손)으로 한정한다. 선택자와 선택자 사이를 공백으로 구분한다. 바로 한 차수 밑의 자식 뿐 아니라 자손 모든 요소에 적용된다.

 

하위 선택자 예시)

        <h1>hello</h1>

        <h1>hello2</h1>

        <h2>hi</h2>

        <div>

            <h2>hi2</h2>

        </div>

 

.parent h2{

    background-color: red;

}

하위 선택자

---

 

인접 형제 선택자

 

선택자1 + 선택자2{ /CSS 코드 내용/}

 

인접 형제 선택자는 선택자1의 바로 다음에 오는 형제 요소를 선택한다. 선택자 1의 요소는 선택하지 않고 인접한 선택자 2의 요소만을 선택한다.

 

일반 형제 선택자

 

선택자1 ~ 선택자2{ /CSS 코드 내용/}

 

일반 형제 선택자는 선택자1 다음에 오는 선택자 2가 적용되는 모든 형제 요소들을 선택한다. 인접 형제 선택자가 선택자 1 다음에 오는 1개만 선택했던 것과 달리 일반 형제 선택자는 모두 선택한다는 차이점이 있다.

 

일반 형제 선택자 예시)

    <h1>Title</h1>

    <p>contents1</p>

    <p>contents2</p>

 

h1 ~ p{

    background-color: red;

}  

일반 형제 선택자

 

가상 클래스 선택자

 

가상 클래스 선택자는 요소의 상태를 이용하여 선택자를 지정하는 방법이다.

 

동적 가상 클래스 선택자

 

:hover

요소에 마우스 커서가 올라가면 해당 태그가 선택자로 지정된다. 버튼 등에 적용하여 반응하도록 만들기 편하다.

 

:active

요소를 마우스로 클릭하는 동안 해당 태그가 선택자로 지정된다.

입력 요소의 가상 클래스 선택자

인풋 등의 요소에 특정 상태가 만족되면 선택자로 해당 요소를 지정하게 된다.

 

:checked

체크박스가 표시되어있으면 선택자로 지정한다.

 

:focus

:입력 요소에 커서가 활성화되면 지정한다.

 

:disabled

해당 요소가 disabled속성이라면 지정한다.

 

:enabled

요소가 활성화 상태라면(disabled 속성이 아니라면) 지정한다.

 

구조적 가상 클래스 선택자

 

구조적 가상 클래스 선택자는 HTML내에서 태그의 위치, 다른 태그와의 관계 등을 고려하여 요소를 선택한다.

 

:first-child

E의 첫번째 자식 요소를 지정한다.(자식 요소에서 E가 처음 나올 경우 선택한다)

 

E:last-child

E의 마지막 자식 요소를 지정한다.(자식 요소에서 E가 마지막으로 나올 경우 선택한다)

 

E:nth-child(n)

E요소가 부모 요소의 자식 요소 중 n번째 순서이면 선택

• odd : 홀수로 지정
• even : 짝수로 지정

    <ul>

        <li>Item 1</li>

        <li>Item 2</li>

        <li>Item 3</li>

    </ul>

 위의 html에서 li:nth-child(1)은 Item1이다. 해당 li가 부모요소 ul의 첫 번째 자식이기 때문이다.

 

E:nth-last-child(n)

E요소가 부모 요소의 자식 요소 중 뒤에서 n 번째이면 선택

 

E:nth-of-type(n)

부모 요소의 자식 요소 중 n번째로 나오는 E 요소를 선택

 

E:nth-last-of-type(n)

부모 요소의 자식 요소 중 뒤에서 n번째로 등장하는 E 요소 선택

 

E:fitst-of-type

부모 요소의 자식 요소 중 처음 등장하는 E 요소 선택

 

E:last-of-type

부모 요소의 자식 요소 중 마지막으로 등장하는 E 요소 선택

 

first-child 예시)

    <div>

        <h2>1</h2>

        <h2>2</h2>

    </div>

    <div>

        <h2>1</h2>

        <h2>2</h2>

    </div>

h2:first-child{

    background-color: red;

}

first-child

---

nth-child 예시)

    <div>

 

        <h3>sd</h3>

        <h2>sdf</h2>

        <h2>sdf</h2>

    </div>

 

div > h2:nth-child(3){

    background-color: red;

}

 

nth-child

---

 

first-of-type과 first-child 차이점

 

first-child

    <div>

        <h1>h1</h1>

        <h2>1</h2>

        <h2>2</h2>

    </div>

    <div>

        <h2>1</h2>

        <h2>2</h2>

    </div>

 

h2:first-child{

    background-color: red;

}

 

 

first-of-type

h2:first-of-type{

    background-color: red;

}

즉 first-of-type은 E요소(여기서는 h2)가 첫번째로 나올 때까지 찾아서 적용시킨다.

그러나 first-child는 자식요소로 h2가 처음 나온 경우에만 적용시킨다.

 

이외에도  nth-child와 nth-oh-type도 유사하게 동작한다.