CSS의 선택자

개요

CSS는 어떤 태그들에게 스타일 효과를 주는 언어입니다.

그렇다면 어떤 태그에 적용하는지를 정의하는 문법이 필요하게 되는데, 이때의 문법을 선택자 라고 합니다.

선택자 {
	속성1: 값1;
	속성2: 값2;
}

CSS는 위 처럼 선택자를 먼저 쓰고 중괄호 {} 안에 속성과 값을 적는 방식으로 이루어져 있습니다.

 

종류

CSS의 선택자는 다음 3개로 이루어져 있습니다.

• 태그 선택자
• id 선택자
• class 선택자

---

태그 선택자

개요

태그이름 { 속성1: 속성값1; 속성2: 속성값2; } 

처럼 사용하며 해당되는 태그 전부에 스타일을 적용시킵니다.

사용법

span { color:#F00; }
div { color:#0F0; }

id,class 선택자

개요

태그에서 설정한 id나 class 속성에 따라 스타일을 지정합니다.
참고: HTML 태그의 속성

id 에 줄 경우 아래처럼 #을 맨 앞에 붙여 사용하며, 원칙적으로 하나의 객체에만 적용할 수 있습니다.

#아이디{ 속성1:속성값; 속성2:속성값; } 

class에 줄 경우 아래처럼 .을 맨 앞에 붙여 사용하며, 여러 객체에 적용할 수 있습니다.

.클래스명{ 속성1:속성값; 속성2:속성값 }

사용법

#m_box{ width:500px; height:300px; }
.box{ background-color:blue; }

 

부모 자식 선택자

개요

선택자1 선택자2 { 속성1:속성값; 속성2:속성값; }

위와 같이 태그이름 사이에 공백을 넣은 선택자는 부모 태그 하위에 있는 태그에 스타일을 적용시킵니다.

div span{ ... } 처럼 태그 이름 뿐만 아니라 #main_content .box{ ... } 처럼 아이디와 클래스를 사용 할 수도 있습니다.

사용법

div span{ text-align:center; padding:10px; }
div.yellow_box span { background-color:yellow; }
div#c_box span { text-align:center; padding:10px; }
div span .blue_span {background-color:blue; }
div span #c_span { text-align:center; padding:10px; }

다중 조건 선택자

개요

CSS 선택자에서도 AND나 OR과 같은 선택자를 비슷하게 나마 쓸 수 있습니다.

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

선택자 사이에 공백이 제거되는 경우 여러 선택자를 동시에 만족하는 태그에 스타일을 적용 할 수 있습니다. (AND 연산)

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

쉼표 (,)를 통해 두 선택자 중 하나라도 만족시 적용되는 조건을 만들 수도 있습니다. (OR 연산)

사용법

div#m_box{ width:500px; height:150px; }
div.box{ background-color:blue; }

가상 클래스 선택자

개요

선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 합니다.

• :link - 방문한 적이 없는 링크
• :visited - 방문한 적이 있는 링크
• :hover - 마우스를 롤오버 했을 때
• :active - 마우스를 클릭했을 때
• :focus - 포커스 되었을 때 (input 태그 등)
• :first - 첫번째 요소
• :last - 마지막 요소
• :first-child - 첫번째 자식
• :last-child - 마지막 자식
• :nth-child(2n+1) - 홀수 번째 자식

위는 대표적인 가상 클래스의 예시이며 미리 정의되어 있는 가상 클래스를 효과적으로 사용하면 HTML, CSS 및 JavaScript의 코드를 효과적으로 줄일 수 있습니다.

사용법

.some-box:hover{ background-color: red; }
input.no-border:focus{ border: none }
.container-box:last-child{ margin-right: 0; }