$$config title: [CSS3] 신경 쓸 선택자 keywords: - IT - CSS3 - 선택자 $$ ## 1. X - ```id``` 나 ```class```가 아닌 ```type```에 따라 한 페이지에 있는 모든요소를 대상으로 삼는다. ```css3 a { color: red; } ul { margin-left: 0; } ``` --- ## 2. X:visited와 X:link - 클릭하기 전 상태의 앵커 태그 전체를 대상으로 하려고 ```:link``` 가상 클래스를 사용합니다. - ```visited``` 가상 클래스로 하기도합니다. 이는 클릭했었거나 방문했던 페이지에 있는 앵커 태그에만 특정한 스타일을 적용할 수 있습니다. ``` css3 a:link { color: red; } a:visted { color: purple; } ``` --- ## 3. X > Y - 일반 ```X Y```와 ```X > Y```의 차이점은 후자가 직계 자식만을 선택 한다는 것 - ```#container > ul``` 선택자는 ```id```가 ```counter```인 ```div```의 직계 자손인 ```ul```만 대상으로 삼습니다. - 예를 들어 첫 번째 ```li```의 자식인 ```ul```은 대상이 되지 않습니다. ```html div#container > ul { border: 1px solid black; } ---

List Item
- Child
List Item
List Item
List Item

``` --- ## 4. X[href^="http"] - 웹사이트에서 외부로 연결된 링크 옆에 작은 아이콘을 어떻게 보이게 하는지 만들어줍니다. - 캐럿 기호를 이용하는 작업이며 문자열의 시작을 표기하는 정규 표현식에서 흔히 사용됩니다. - ```http```로 시작하는 ```href```값을 가진 앵커 태그를 대상으로 하고 싶다면, 위의 코드와 유사한 선택자를 사용하면 됩니다. ``` css3 a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; } ``` --- ## 5. X:nth-child(n) - 여러 요소 중에서 특정 요소를 지목하는 방법인 ```nth-child``` 가상 클래스가 있습니다. - ```nth-child```는 변수값을 정수로 받습니다. 0부터는 시작하지 않습니다. - 두 번째 항목을 대상으로 하고 싶다면 ```li:nth-child(2)```로 작성합니다. ``` css3 li:nth-child(3) { color: red; } ``` ---