선택자 element.class는 클래스 이름이 class인 element 요소를 선택합니다.
다음 예에서 사용된 p.intro는 클래스가 intro인
요소를 선택합니다.
선택자 p.intro 사용 예
ex3-9.html
<style> p.intro { background-color: yellow; } </style> <body> <div class="intro"> <p>음식은 인간이 먹음으로써 활동에 필요한 영양분을 얻을 수 있도록 만들어진 사물을 말한다.</p> </div> <p class="intro">음식은 인간이 살아가는데 반드시 필요로 하는 에너지를 공급해주는 요소이다.</p> </body>
ex3-9.html의 실행 결과
■ 선택자 : element:first-child
선택자 element:first-child는 element 요소 중에서 첫 번째 요소를 선택합니다. p.first-child는
요소 중에서 첫 번째 요소를 선택합니다.
선택자 p:first-child 사용 예
ex3-10.html
<style> p:first-child { border: solid 1px red; } div p:first-child { background-color: yellow; } </style> <body> <span> <p>음식은 단순히 배를 채우는 것뿐 아니라 어떤 음식을 먹느냐도 중요하다.</p> <p>과일과 채소의 껍질은 몸에 좋은 성분이 많아서 껍질 째로 먹어야 한다.</p> <p>인간 외의 동물들이 먹는 음식은 먹이라고 부른다.</p> </span> <div> <p>먹음으로써 활동에 필요한 영양분을 얻을 수 있도록 만들어진 사물을 말한다.</p> <p>살아가는데 반드시 필요로 하는 에너지를 공급해주는 요소이다.</p> <p>사육 등을 통해 길들여진 개체에 제공되는 음식은 사료라고 부른다.</p> </div> </body>
ex3-10.html의 실행 결과
■ 선택자 : element:last-child
선택자 element:last-child는 element 요소 중에서 마지막 요소를 선택합니다. p.last-child는
요소 중에서 마지막 요소를 선택합니다.
선택자 p:last-child 사용 예
ex3-11.html
<style> p:last-child { border: solid 1px black; } div p:last-child { background-color: skyblue; } </style> <body> <span> <p>음식은 단순히 배를 채우는 것뿐 아니라 어떤 음식을 먹느냐도 중요하다.</p> <p>과일과 채소의 껍질은 몸에 좋은 성분이 많아서 껍질 째로 먹어야 한다.</p> <p>인간 외의 동물들이 먹는 음식은 먹이라고 부른다.</p> </span> <div> <p>먹음으로써 활동에 필요한 영양분을 얻을 수 있도록 만들어진 사물을 말한다.</p> <p>살아가는데 반드시 필요로 하는 에너지를 공급해주는 요소이다.</p> <p>사육 등을 통해 길들여진 개체에 제공되는 음식은 사료라고 부른다.</p> </div> </body>
ex3-11.html의 실행 결과
■ 선택자 : element: nth-child
선택자 element:nth-child(n)는 element 요소 중에서 n번째 요소를 선택합니다. li:nth-child(n)은
요소 중에서 마지막 요소를 선택합니다.
선택자 li:nth-child 사용 예
ex3-12.html
<style> li:nth-child(1) { background-color: yellow; } li:nth-child(3) { background-color: skyblue; } </style> <body> <ul> <li>음식은 단순히 배를 채우는 것뿐 아니라 어떤 음식을 먹느냐도 중요하다.</li> <li>과일과 채소의 껍질은 몸에 좋은 성분이 많아서 껍질 째로 먹어야 한다.</li> <li>인간 외의 동물들이 먹는 음식은 먹이라고 부른다.</li> <li>먹음으로써 활동에 필요한 영양분을 얻을 수 있도록 만들어진 사물을 말한다.</li> </ul> </body>
