[CSS] 선택자 class & id

class 선택자

class 속성은 글로벌 속성으로, 어느 태그에서도 사용할 수 있다.
class 속성에 값을 넣게 되면 class 선택자를 이용해 해당 요소에 스타일 규칙을 적용할 수 있다.

.foo {font-size:30px };

<p class="foo">I'm hungry</p>

class 선택자를 쓸 때는 맨 앞에 .(마침표)를 찍는다.
이렇게 되면 어느 요소든지 class 속성값이 "foo"로 선언된 요소가 있다면 해당 스타일 규칙을 적용받게 된다.

class 선택자의 naming 규칙은 underscore방식을 사용한다.

다중 class

.foo{font-size:30px };
.bar{color:orange};

<p class="foo bar">I'm hungry</p>

class 속성 안에 공백으로 구분하여 여러 개의 class 값을 넣어줄 수도 있다.

id 선택자

#bar{background-color:yellow;}

<p id="bar">me too</p>

id 선택자를 쓸 띠는 맨 앞에 #(해시)를 쓰며, naming 규칙은 camelcase 방식을 사용한다.
class와 달리 id는 문서 내에서 유일해야 한다.

 

class 선택자는 여러요소에 같은 클래스를 넣고 같은 규칙을 적용할 수 있지만,
id 속성값은 문서 내에 유일하게 사용된다.

즉, id 선택자로 규칙을 적용할 수 있는 요소는 단 하나 뿐이다.

또한 id와 class는 구체성의 값이 다르다.

.foo{background-color:green;};
#bar{background-color:yellow;};

<div class="foo" id="bar">my color</div>

위에서 div의 background색은 구체성 값이 큰 id 선택자의 값인 yellow가 될 것이다.

구체성에 대해 자세히 알고 싶다면 내 이전 게시글을 참고하면 좋을 것 같다.

구체성 관련 게시글