셀렉터
CSS가 style을 적용하고자하는 HTML 요소를 특정하는 방법이다. HTML에 요소 자체나, class, id 이름으로 특정한다. 자주 사용하고 알아두면 좋을 셀럭터를 정리해보려 한다.
전체 셀렉터
- -> HTML 문서 내의 모든 요소를 선택한다.
<style>
* { color: red; }
</style>태그 셀렉터
지정된 태그명을 가지는 요소를 선택한다.
<style>
/* 모든 p 태그 요소를 선택 */
p { color: red; }
</style>ID 셀렉터
id 속성 값을 지정하여 일치하는 요소를 선택한다. id 값은 중복되지 않게 설정해야한다. #id값 -> 형태로 사용한다.
Class 셀렉터
class 속성 값을 지정하여 일치하는 요소를 선택한다. class 값은 중복될 수 있다. .class값 -> 형태로 사용한다.
class 값은 공백으로 구분하여 여러 개를 지정할 수 있다. 그래서 스타일을 미리 만들어두고 후에 html에 요소에 추가하여 스타일을 바꾸는 방법도 사용할 수 있다.
<style>
.text-center { text-align: center; }
.text-large { font-size: 200%; }
.text-red { color: red; }
.text-blue { color: blue; }
</style>
...
<body>
<p class="text-center">Center</p>
<p class="text-large text-red">Large Red</p>
<p class="text-center text-large text-blue">Center Large Blue</p>
</body>어트리뷰트(속성) 셀렉터
지정된 어트리뷰트를 갖는 요소를 선택하는데 다양한 형태가 있다.
- 셀렉터[어트리뷰트] 형태 : 지정된 어트리뷰트를 갖는 모든 요소를 선택한다.
<style>
/* a 요소 중에 href 어트리뷰트를 갖는 모든 요소 */
a[href] { color: red; }
</style>- 셀렉터[어트리뷰트="값"] 형태 : 지정된 어트리뷰트를 가지며 지장된 값과 어트리뷰트 값이 일치하는 모든 요소를 선택한다.
<style>
/* a 요소 중에 target 어트리뷰트의 값이 "_blank"인 모든 요소 */
a[target="_blank"] { color: red; }
</style>- 셀렉터[어트리뷰트*="값"] 형태 : 지정된 어트리뷰트 값을 포함하는 요소를 선택한다.
<style>
/* div 요소 중에서 class 어트리뷰트 값에 "test"를 포함하는 요소 */
div[class*="test"] { color: red; }
</style>
<body>
<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="test">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>
</body>후손 셀렉터
자신의 1 level 상위에 속하는 요소를 부모 요소, 1 level 하위에 속하는 요소를 자식 요소라고 한다.
자신보다 n level 하위에 속하는 요소는 후손 요소라 한다.
<style>
/* div 요소의 후손요소 중 p 요소 */
div p { color: red; }
</style>자식 셀렉터
1 level 하위 요소 중 일치하는 것만 적용된다.
<style>
/* div 요소의 자식요소 중 p 요소 */
div > p { color: red; }
</style>가상 클래스 셀렉터
가상 클래스는 요소의 특정 상태에 따라 스타일을 정의할 때 사용된다. 특정 상태는 예를 들어
- 마우스가 올라와 있을 때
- 링크를 방문했을 때와 아직 방문하지 않았을 때
- 포커스가 들어와 있을 때
등의 상태를 말한다. :(콜론)을 사용한다.
링크 셀렉터
<style>
/* a 요소가 방문하지 않은 링크일 때 */
a:link { color: orange; }
/* a 요소가 방문한 링크일 때 */
a:visited { color: green; }
</style>동적 셀렉터
<style>
/* a 요소에 마우스가 올라와 있을 때 */
a:hover { font-weight: bold; }
/* a 요소가 클릭된 상태일 때 */
a:active { color: blue; }
/* text input 요소와 password input 요소에 포커스가 들어와 있을 때 */
input[type=text]:focus,
input[type=password]:focus {
color: red;
}
</style>구조 가상 클래스 셀렉터
<style>
/* p 요소 중에서 첫번째 자식을 선택 */
p:first-child { color: red; }
/* p 요소 중에서 마지막 자식을 선택 */
/* body 요소의 두번째 p 요소는 마지막 자식 요소가 아니다.
body 요소의 마지막 자식 요소는 div 요소이다. */
p:last-child { color: blue; }
/* ol 요소의 자식 요소인 li 요소 중에서 짝수번째 요소만을 선택 */
ol > li:nth-child(2n) { color: orange; }
/* ol 요소의 자식 요소인 li 요소 중에서 홀수번째 요소만을 선택 */
ol > li:nth-child(2n+1) { color: green; }
/* ol 요소의 자식 요소인 li 요소 중에서 4번째 요소 요소만을 선택 */
ol > li:nth-child(4) { background: brown; }
/* ul 요소의 모든 자식 요소 중에서 뒤에서부터 시작하여 홀수번째 요소만을 선택 */
ul > :nth-last-child(2n+1) { color: red; }
/* ul 요소의 모든 자식 요소 중에서 뒤에서부터 시작하여 짝수번째 요소만을 선택 */
ul > :nth-last-child(2n) { color: blue; }
</style>가상 요소 셀렉터
가상 요소는 요소의 특정 부분에 스타일을 적용하기 위해 사용된다. 예를 들어
- 요소의 컨텐츠의 첫글자 또는 첫줄
- 요소의 컨텐츠의 앞 또는 뒤
등에 사용한다.
<style>
/* p 요소 콘텐츠의 첫글자를 선택 */
p::first-letter { font-size: 3em; }
/* p 요소 콘텐츠의 첫줄을 선택 */
p::first-line { color: red; }
/* h1 요소 콘텐츠의 앞 공간에 content 어트리뷰트 값을 삽입한다 */
h1::before {
content: " HTML!!! ";
color: blue;
}
/* h1 요소 콘텐츠의 뒷 공간에 content 어트리뷰트 값을 삽입한다 */
h1::after {
content: " CSS3!!!";
color: red;
}
/* 드래그한 콘텐츠를 선택한다 */
::selection {
color: red;
background: yellow;
}
</style>참고
음악하는 개발자