CSS | 3. 선택자

요소 선택자

선택자는 복잡하고 다양한 요소들 사이에 내가 원하는 요소만 선택할 수 있게 해줍니다. 요소 선택자는 가장 기본이 되는 선택자

h1 {color: red;}

그룹화

쉼표를 통해 그룹화 가능합니다.

 h1, h2, h3, h4, h5, h6 {color: red;}

전체선택자 : *(별표) 기호로 모든 요소 선택

* {color: red;}

Class 선택자

요소에 구애받지 않고 스타일 규칙을 적용
글로벌 속성이 class 속성 값을 넣고 class 선택자를 이용해 해당 요소에 스타일 규칙 적용
class 선택자는 맨 앞에 .(마침표) 추가

.foo (font-size: 20px; }
<p class = "foo"> ... </p>

다중클래스

공백을 넣어 여러 개의 class값을 넣을 수 있다

.foo (font-size: 20px; }
.bar {color: red;}
<p class = "foo bar"> ... </p>

Id 선택자

'#'을 맨 앞에 추가

#bar (background-color: red; }
<p id = "bar"> ... </p>

class 선택자와 차이점

1. class와는 달리 id는 문서 내에서 유일합니다.
2. id선택자로 규칙을 적용할 수 있는 요소도 하나뿐입니다.

속성 선택자

선택자의 조합

요소선택자와 class선택자의 조합 : <p>이면서 class속성에 bar가 있어야 적용

p.bar {...}

다중 class : class속성에 foo와 bar가 모두 있어야 적용

.foo.bar {...}

id와 class의 조합

#foo.bar {...}

속성선택자

1. <p class="foo"> ... </p>
2. <p class="bar"> ... </p>
3. <p class="foobar" id="fb"> ... </p>

class 속성이 있는 요소를 다 선택해서 적용. (1, 2, 3번 선택 됨)

p[class] {color: red;}

class 속성과 id 속성이 있는 요소를 다 선택해서 적용 (3번 선택 됨)

p[class][id] {text-decoration: underline;}

속성값으로 선택 (1번 선택 됨)

p[class="foo"] {color: red;}

속성값으로 선택 (3번 선택 됨)

p[id="fb"] {color: red;}

부분 속성값으로 선택  ~  : 공백으로 구분한 'foo' 단어가 포함되는 요소 선택

p[class~="foo"] {color: red;}

부분 속성값으로 선택  ^  : class 속성값이 'foo'로 시작하는 요소 선택  

p[class~="foo"] {color: red;}

부분 속성값으로 선택  $  : class 속성값이 'foo'로 끝나는 요소 선택  

p[class$="foo"] {color: red;}

부분 속성값으로 선택  *  : class 속성값이 'foo' 문자가 포함되는 요소 선택

p[class*="foo"] {color: red;}

관련포스트

• CSS | 개념
• CSS | 구문과 적용 방법
• CSS | 폰트 텍스트 관련
• CSS | 박스모델