참조
1. w3schools : www.w3schools.com/css/css_selectors.asp
2. MDN web docs : developer.mozilla.org/ko/docs/Web/HTML/Block-level_elements
2021/02/26
CSS Selector
- CSS Selector는 스타일링 하고 싶은 HTML 요소를 선택하기 위해 사용한다. 5가지 종류가 있음.
1. Simple selectors - id, name, class 등의 속성으로 요소 선택
2. Combinator selectors - 요소들간의 관계를 이용해 요소 선택
1. Descendant selector (space)
특정 요소의 자손 요소를 선택한다. 아래 예시의 경우 <div>태그 안에 있는 <p>태그만 영향을 받는다.
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Descendant Selector</h2>
<p>The descendant selector matches all elements that are descendants of a specified element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section><p>Paragraph 3 in the div.</p></section>
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
<!-- paragraph 1, 2, 3만 영향을 받는다.-->
2. child selector (>)
특정 요소의 자식 요소를 선택한다. 아래 예시의 경우 <div>태그의 자식인 <p> 태그만 영향을 받는다. <div> 태그 안에서 다른 태그로 또 둘러쌓인 <p> 태그는 영향을 받지 않는다.
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Child Selector</h2>
<p>The child selector (>) selects all elements that are the children of a specified element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<section><p>Paragraph 3 in the div.</p></section> <!-- not Child but Descendant -->
<p>Paragraph 4 in the div.</p>
</div>
<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>
</body>
</html>
<!-- paragraph 1, 2, 4만 영향을 받는다.-->
3. Adjacent sibling selector (+)
특정 요소 바로 뒤에 이어서 오는 요소를 선택한다. 아래 예시의 경우 <div> 태그가 끝난 뒤에 바로 이어서 오는 <p> 태그만 영향을 받는다.
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Adjacent Sibling Selector</h2>
<p>The + selector is used to select an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div elements:</p>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
</div>
<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>
<div>
<p>Paragraph 5 in the div.</p>
<p>Paragraph 6 in the div.</p>
</div>
<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>
</body>
</html>
<!--영향받는 문장은 paragraph 3, 7이다.-->
4. General sibling selector (~)
~를 사이에 두고 있는 두 요소가 같은 부모를 가지고 있고, 뒤의 요소가 앞의 요소보다 나중에 나왔을 때 뒤의 요소에 영향을 미친다.
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>General Sibling Selector</h2>
<p>The general sibling selector (~) selects all elements that are siblings of a specified element.</p>
<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>
</body>
</html>
<!-- paragraph 3, 4만 영향을 받는다. -->
3. Pseudo-class selectors - 특정 state를 기준으로 요소 선택
Pseudo-class : 특정 요소의 상태(state)를 지정하기 위해 사용
마우스를 올려놓았을 때 스타일을 지정하거나, 방문/미방문한 링크의 스타일 지정, focus를 가진 요소의 스타일을 지정할 때 사용한다.
기본적인 문법은 아래와 같다.
selector:pseudo-class {
property: value;
}
링크를 아래와 같이 여러 개의 상황에 맞춰 스타일링할 수 있다.
/* erase underbar from link */
a{
text-decoration : none;
}
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
주의할 점은, a:hover는 성능 개선을 위해 a:link와 a:visited 다음에 와야 한다. 또한, a:active 역시 a:hover 다음에 와야 한다.
:first-child : 가장 처음 등장하는 해당 태그에 스타일을 적용한다.
<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: blue;
}
</style>
</head>
<body>
<p>This is some text.</p> <!-- 여기에만 스타일이 적용된다. -->
<p>This is some text.</p>
</body>
</html>
/* 모든 p 태그 안에서 첫 번째 i 태그에 스타일 적용 */
p i:first-child {
color: blue;
}
/* 첫 번째 p 태그 안의 모든 i 태그에 스타일 적용 */
p:first-child i {
color: blue;
}
4. Pseudo-elements selectors - 요소의 특정 부분을 선택해서 스타일링, CSS 클래스와 연계 가능(.으로 구분하는)
* 요소의 첫 글자나 첫 줄 스타일링
* 요소 앞, 뒤에 컨텐츠를 삽입할 때
위와 같은 경우에 pseudo-elements selectors를 사용한다.
문법
selector::pseudo-element {
property: value;
}
::first-line : 특정 요소의 첫 번째 줄에 스타일 적용, block-level elements에만 적용 가능하다.
::first-letter : 특정 요소의 첫 번째 글자에 스타일 적용, 역시 block-level elements에만 적용 가능하다.
block-level elements(블록 레벨 요소)
- 언제나 새로운 줄에서 시작하고, 화면의 좌우 양쪽으로 최대한 늘어나 사용 가능한 모든 너비를 차지한다.
- 블록 레벨 요소는 <body> 요소 안에서만 나타날 수 있다.
블록 레벨 요소 vs 인라인 요소
1. 블록 레벨 요소는 인라인 요소와는 다른 블록 레벨 요소를 포함할 수 있다. 이런 구조적인 차이점으로 인해 블록 레벨 요소는 인라인 요소보다 더 큰 구조를 생성할 수 있다.
2. 블록 레벨 요소는 새로운 줄에서 시작하지만, 인라인 요소는 줄의 어느 곳에서나 시작할 수 있다.
콜론이 1개 -> pseudo-class, 2개 -> pseudo-elements
::before, ::after : 특정 요소 앞, 뒤에 컨텐츠를 삽입하기 위해 사용한다.
::marker : <ul>, <ol>과 같은 리스트 앞에 달리는 아이콘의 스타일을 설정한다.
::selection : 마우스로 드래그한 요소들의 속성을 결정한다, color, background, cursor, outline 속성 적용 가능
5. Attribute selectors - 속성이나 속성 값을 이용해 요소 선택
대괄호 [] 안에 속성 이름을 넣어서 해당 속성을 가진 태그만 적용하도록 할 수 있다.
예시
<!DOCTYPE html>
<html>
<head>
<style>
a[target]{
background-color: yellow;
}
</style>
</head>
<body>
<h2> CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>
<a href="https://www.w3schools.com">w3schools.com</a> /* 적용 X */
<a href="http://www.disney.com" target="_blank">disney.com</a> /* 적용 */
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a> /* 적용 */
</body>
</html>
[attribute="value"] : 특정 속성이 특정 값을 가지는 경우에만 스타일 적용
[attribute~="value"] : 특정 속성이 특정 값을 포함하는 경우에만 스타일 적용 ex) attribute = value, valuexx, 12value ...
[attribute|="value"] : 특정 속성이 특정 값으로 시작하는 경우에만 스타일 적용, 단어는 하이픈(-)으로 구분
ex) attribute = value, attribute = value-flower, attribute = value-qqq ...
[attribute^="value"] : 특정 속성이 특정 값으로 시작하는 경우에만 스타일 적용, 하이픈으로 구분하지 않아도 됨.
[attribute$="value"] : 특정 속성이 특정 값으로 끝나는 경우에만 스타일 적용, 하이픈으로 구분하지 않아도 됨.
[attribute*="value"] : 특정 속성이 특정 값을 포함하는 경우에만 스타일 적용, 하이픈으로 구분하지 않아도 됨.
6. Id selector
- HTML 태그의 id 속성을 이용해 HTML의 특정 요소를 스타일링한다. 하나의 HTML에서 id는 유일한 값을 가지기 때문에, id selector는 정확히 하나의 요소만을 선택하게 된다. Id selector는 #으로 시작하며, id는 숫자로는 시작할 수 없다.
7. Class selector
- Id selector와 유사하게, class 속성을 이용해 HTML의 특정 요소를 스타일링한다. Class selector는 점(.)으로 시작하거나, (특정 태그).(class 이름)의 형태로 지정할 수 있다. 클래스 이름은 공백 문자(space)로 구분하여 여러 개의 클래스를 지정할 수 있다.
8. Universal selector
- *, 모든 요소를 선택한다.
9. Grouping selector
- HTML의 특정 태그를 지정하여 스타일을 지정할 수 있다. 콤마(,)를 사용하여 여러 개의 태그를 한번에 지정할 수 있다.