class 선택자가 여러개일 경우

하나의 class에 여러개의 선택자를 넣을수 있다.

<div class="abc def">
</div>

이렇게 공백으로 구분해주면 여러개를 사용하는것이 가능하다.

선택자가 여러개일 경우 어떤스타일이 적용되는걸까?

<style>
	.abc.def{
		...
	}
</style>
...
...
<div class="abc">
	...
</div>
<div class="def">
	...
</div>
<div class="abc def">
	...
</div>

<div class="abc def">

abc 나 def가 아닌 abc def모두를 가진클래스에게만 css를 적용시키고 싶다면 css에 이름을 나열해서 써준다 (공백없이 나열해야된다.)

.abc.def에 대한 정의가 없다면?

그럼 어떻게 적용되는 것 일까?

CSS코드에 적힌 순서대로 적용이된다.

<style>
	.abc{
		...
	}
	.def{
		...
	}
</style>

CSS가 이렇게 되있다고 하면

<div class="abc def">
</div>
<div class="def abc">
</div>

기본은 두개가 합쳐서 적용이 되는데 중복되는 속성이 있을경우에

결국에 def가 css코드상 나중에 적용되기 때문에

위의 두 경우 모두 def가 적용이된다.