CSS 자주 사용하는 선택자 모음

자주 사용하는 CSS 선택자에 대해서 소개드리겠습니다.

css를 작성하다 보면 어디에 스타일 주어야 할지 정해야 하는데요.

선택자를 이용하여 스타일을 적용할 요소를 정할 수 있습니다.

전체 선택자

모든 요소에 다 적용이 됩니다.

* 를 이용해서 사용합니다.

* {
   color: red;
}

유형 선택자

특정 태그에 적용이 됩니다

div, span 태그 등을 이용합니다.

해당 태그에는 모두 적용이 됩니다.

div {
    width: 200px;
}

span {
    display: inline-block;
}

ID 선택자

요소의 ID에 적용이 됩니다.

ID 앞에 #을 적어서 사용합니다.

CSS를 사용하는데 ID 선택자는 꼭 필요한 경우가 아니면 사용하지 않는 것이 좋습니다.

ID를 이용하게 되면 다른 요소에는 적용이 안되며, 재사용이 불가능하게 되거든요.

잘 생각해시고 ID가 필요한 곳에서 사용하시기 바랍니다.

#ID {
   color: blue;
}

#btnOK {
   border: 1px solid black;
}

클래스 선택자

엘리먼트의 class를 찾아서 스타일이 적용이 됩니다.

가장 많이 쓰고 있습니다.

class의 이름 앞에 .을 붙입니다.

.wrapper {
   width: 300px;
   height: 200px;
}

자식 결합자

특정 요소의 자식 요소들을 찾으려면

공백을 이용합니다.

첫 번째 선택자의 자식을 찾기 위해서는 첫 번째 선택자 공백 그리고 자식에서 찾을 선택자를 입력합니다.

아래는 wrapper 클래스의 자식 중에 span 태그에만 적용이 됩니다.

.wrapper span {
   color: blue;
}

형제 결합자

일반적으로 부모 아래에 있는 동일한 레벨에 있는 요소들만 찾을 수 있습니다.

~ 를 사용합니다.

p태그와 동일 레벨에 있는 li에게 스타일을 적용할 수 있습니다.

p ~ li {
   color: red;
}

인접형제 결합자

요소 바로 뒤에 있는 요소에만 적용입니다.

+ 를 사용합니다

p 태그 바로 뒤에 있는 li에만 적용이 됩니다.

p + li {
   color: blue;
}

type 선택자

input[type=text] {
   padding: 5px;
}

input[type=password] {
   padding: 5px;
}