# CSS의 특수 선택자

특수선택자

CSS에서는 태그 이름과 클래스 이름, 아이디 이름을 이용한 선택자 외에도 특수한 선택자들을 제공합니다. 

이 특수한 선택자들의 문제는 일부 브라우저에서만 작동되는 경우가 많다는 것입니다. 

반면 CSS의 특수한 선택자들을 자유자재로 이용한다면 jQuery와 같은 프레임워크를 활용하는 데 매우 큰 도움이 될 것입니다. 

또한 앞으로 브라우저들이 특수한 선택자들을 더 많이 지원할 전망이기 때문에 희망적이라고 할 수 있습니다.

---

전역선택자

전역선택자는 별 선택자라고도 부릅니다. CSS2에서 추가된 선택자입니다. 흔히들 다음과 같이 사용하고 있을 것입니다.

* {margin : 0; padding : 0;}

* 선택자를 이용해서 페이지 내에 있는 모든 요소의 마진과 패딩을 0으로 초기화

이 CSS의 코드는 보통 CSS문서의 최상단에 넣어서 사용할 것입니다. 문서에 있는 모든 요소의 마진과 패딩을 '0'으로 초기화합니다. CSS의 전역 선택자인 '*'은 운영체제의 '*'과 비슷한 역할을 합니다. 

다른 예제 들도 알아보겠습니다.

div * {color : red;}

div 안에 있는 자식요소들 속에 포함된 텍스트를 빨간색으로 칠함

요소 * 방식으로 스타일을 사용하면 해당 요소 아래에 있는 요소들에 스타일 적용이 된다.

* div {color : red;}

모든 div 안에 있는 텍스트를 빨간색으로 칠함

div * strong { color : red;}

div 안에 있는 자식요소들 중 모든 strong에 포함된 텍스트를 빨간색으로 칠함

전역선택자는 이처럼 전역 선택자가 지정한 요소 아래에 있는 모든 요소의 속성을 일괄적으로 바꿀 때 유용합니다. CSS의 기본적인 상속을 무시하고 강제 적용합니다.

---

인접한 형제 선택자

형제 선택자를 잘 활용하면 조금 더 정밀하게 스타일을 적용할 수 있습니다. 인접한 형제 선택자는 '+' 기호로 사용합니다.

h1 + p {color : red;}

<h1> 태그와 가장 가까이 있는 <p> 태그 내에 텍스트를 빨간색으로 칠함.

---

속성 선택자

HTML 태그에는 다양한 속성들이 함께 사용됩니다.

예를 들면 img 태그에는 alt 라는 확장 태그가 있습니다. alt 속성은 이미지를 식별 할 수 있는 텍스트를 넣을 수 있습니다.

<img src="google.gif" alt="구글">

<img>태그에 구글의 로고 이미지를 불러오고 '구글'이라는 텍스트를 alt속성에 부여

img[width|="500"] {border : 10px #ff0000 solid;}

<img> 태그로 가져온 이미지의 너비가 500px인 경우 10px두께의 빨간 테두리를 침

<img src="google.gif" width="500" alt="구글">

---