[ CSS 입문 ] 다중 조건 선택자

| 개요

 

 

 

CSS의 선택자 안에서 "AND"와 "OR"과 같이 선택할때 다중선택이 가능합니다.

태그이름#아이디 { 속성1:속성값; 속성2:속성값; } 
태그이름.클래스명 { 속성1:속성값; 속성2:속성값; }
.클래스명#아이디 { 속성1:속성값; 속성2:속성값; }

앞 전 포스팅에도 살짝 나왔던 내용입니다.

이전 내용과 달리 중간 사이에 "공백"을 없애게 되면 여러개의 조건을 만족하는 선택자를 찾게 됩니다.

앞의선택자이면서 뒤선택자가 만족하는 선택자를 찾게 됩니다.

선택자는 태그선택자, 아이디선택자, 클래스선택자 등 모든 선택자가 사용 될 수 있습니다.

#아이디, .클래스명{ 속성1:속성값; 속성2:속성값; } 
태그이름, .클래스명{ 속성1:속성값; 속성2:속성값; } 

선택자와 선택자 사이 공백에 쉼표(,)를 이용하게 되면 앞, 뒤 조건 중 하나라도 맞는 선택자를 찾게 됩니다.

또는 해당 쉼표는 여러개의 선택자들에 한번에 쉼표(,)로 연결해 두고 같은 스타일을 적용하고 할 때에도 사용할 수 있습니다.

 

 

| 사용법

div#box { width:500px; height:150px; }
span.bold#on { background-color:blue; }
div#box, div.check { padding:10px; }

 

1. box라는 아이디를 가진 div에 width값 500px과 height값 150px을 주어라
2. bold라는 클래스와 on이라는 아이디를 가진 span태그에 백그라운드컬러 파란색을 주어라
3. box라는 아이디를 가진 div 그리고 check라는 클래스를 가진 div에 padding을 10px주어라

 

위 와 같이 한개의 선택자 안에 여러가지의 조건이 있다면 해당 조건들을 잘 연결하여 

정확한 선택자를 선택할 수 있으며, 3번 처럼 여러개의 선택자들을 한번에 선택하여 한가지의 스타일을

한번에 적용 할 수 있습니다.