아이디 선택자, 클래스 선택자

body 구성

<body>
	<h1>Header 2</h1>
    <h1 id="target">Header 1</h1>
    <h1>Header 2</h1>
</body>

script 구성

<script>
	$(document).ready(function() {
    	$('#target').css('color', 'orange');
    });
</script>

HTML 웹 표준에 따르면 id 속성은 HTML 페이지 내에서 유일한 값을 가져야 한다. 즉, 위 구성에서 id 속성으로 target은 무조건 한 개만 존재해야 한다. ( 실레 실행에는 2개 이상이어도 문제없음. )

h1 태그 중 id 속성이 target인 문서 객체 선택하기

<script>
	$(document).ready(function() {
    	$('h1#target').css('color', 'orange');
    });
</script>

body 구성

<body>
	<h1 class="item">Header</h1>
    <h1 class="item select">Header 1</h1>
    <h1 class="item">Header 2</h1>
</body>

script 구성

<script>
		$(document).ready(function() {
    	$('.item').css('color', 'orange');
        $('.h1.item').css('background', 'red');
    });
</script>

두 클래스 속성이 모두 있는 문서 객체만 적용하기

<script>
	$(document).ready(function() {
    	$('.item.select').css('color', 'orange');
    });
</script>

현재 body 태그에서 두 클래스 속성이 모두있는 문서 객체는 두 번째 위치한 h1 태그이므로 두 번째 h1 태그에만 스타일이 적용된다.

기록으로 성장하다