css 선택자 기초 정리

css는 html의 태그와 연결된다. 그렇다면, html과 css를 연결하는 방법도 알아야 한다. html 태그와 css를 연결하는 여러가지 방법에 대해 알아보자.

 

1. 기본태그

1.1 태그 선택자 : 태그 자체를 바로 선택

# html
<h3>Hanpy</h3>

# css
h1 {
    color: red;
}

 

 

1.2 자손 선택자 : 모든 내부 태그에 적용

# html
<div>
    <ul>
        <a href="#">빨강이다</a>
        <li>li태그 1</li>
        <li><a href="#">여기도 빨강이다</a></li>
    </ul>
</div>

# css
div a {
    border: 1px solid red;
}

div태그 내부에 있는 모든 a 태그에 적용이 된다. 이를 자식태그라고 한다.

 

 

1.3 자식 선택자 : 바로 밑 태그만 적용

만약 바로 밑의 자식인 직계자식만 적용하고 싶다면 아래와 같이 css에 >만 추가하면 된다.

# css
div > a {
    border: 1px solid red;
}

 

 

2. 순서 선택자

같은 태그가 아래와 같이 반복 될 때 순서를 이용해서 선택하는 방법이다.

#html
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

 

모든 li 적용

# css
ul li {
    border: 1px solid blue;
}

 

첫번째 li 적용

> nth-of-type : 처음부터 카운트를 센다

# css
ul li:nth-of-type(3) {
    border: 1px solid blue;
}

 

마지막 li 적용

> nth-last-type : 마지막부터 카운트를 센다

# css
ul li:nth-last-type(1) {
    border: 1px solid blue;
}

# 위랑 아래는 동일하다

ul li:last-child {
    border: 1px solid blue;
}

 

2의 배수 선택

# css
ul li:nth-of-type(2n) {
    border: 1px solid blue;
}

#위와 아래는 동일하다

ul li:nth-of-type(odd) {
    border: 1px solid blue;
}

 

홀수 선택

# css
ul li:nth-of-type(2n-1) {
    border: 1px solid blue;
}

#위와 아래는 동일하다

ul li:nth-of-type(even) {
    border: 1px solid blue;
}

 

속성 선택자

> 태그 내부의 속성을 이용해서 html과 css를 연결한다.

#html
<input type="text">
<input type="password">

#css
input[type="text"] {
    border: 1px solid blue;
}
input[type="password"] {
    border: 1px solid red;
}

 

클래스 선택자

> class는 한페이지 내에 중복된 값이 오는 것이 가능하다. react에서는 className이라고도 한다.

#html
<p class="hanpy">Hello Hanpy</p>

#css
# p태그의 hanpy 클래스가 포함된 것만 적용된다
p.hanpy {
    border: 1px solid blue;
}

# hanpy 클래스가 들어간 부분에 모두 적용된다.
.hanpy {
    border: 1px solid blue;
}

 

 

ID 선택자

> id는 한 페이지에 중복된 id값이 올수가 없다. 따라서 사실상 태그를 안적어도 된다. id는 중복 사용이 불가하기 때문에 css 적용 시 id 보다는 class를 많이 사용하고, id값은 백엔드 개발 시 많이 쓰인다.

#html
<p id="hanpy">Hello Hanpy</p>

#css
# p태그의 hanpy 클래스에 적용된다
p#hanpy {
    border: 1px solid blue;
}

# hanpy 클래스가 들어간 부분에 적용된다.
#hanpy {
    border: 1px solid blue;
}

 

가상 선택자

> hover와 같이 아직 하지 않은 것들에 대한 선택자이다.

#html
<div>hanpy</div>

#css
div {
    border: 1px solid blue;
}

div:hover {
    border: 1px solid red;
}

div:active {
    border: 1px solid green;
}

# good hanpy 로 표시된다
div:before {
    content: "good"
}

# hanpy bad로 표시된다
div:after {
    content: "bad"
}

 

• hover : 마우스 올릴 때
• active : 마우스 클릭 할 때
• before : 태그 내부 기준으로 가장 앞에 넣고 싶은 것이 있을 때
• after : 태그 내부 기준으로 가장 뒤에 넣고 싶은 것이 있을 때