반응형
💡 코드에서 같은 클래스명을 적용한 태그가 많고, 이 중에서 일부분을 변경해야 하는 상황이 발생할 때 사용할 수 있는 방법입니다.
선택자:nth-child(숫자){CSS속성:값}또는
선택자:nth-last-child(숫자){CSS속성:값}
📋 코드
<!doctype html>
<html>
<head>
<title>title</title>
<meta charset='utf-8'>
<style>
.myMenu{color:skyblue}
.myMenu:nth-child(2){color:red}
</style>
</head>
<body>
<ul>
<li class="myMenu">HTML5</li>
<li class="myMenu">CSS3</li>
<li class="myMenu">JQuery</li>
<li class="myMenu">MySQL</li>
<li class="myMenu">PHP</li>
</ul>
</body>
</html><!doctype html>
<html>
<head>
<title>title</title>
<meta charset='utf-8'>
<style>
.myMenu{color:skyblue}
.myMenu:nth-last-child(4){color:red}
</style>
</head>
<body>
<ul>
<li class="myMenu">HTML5</li>
<li class="myMenu">CSS3</li>
<li class="myMenu">JQuery</li>
<li class="myMenu">MySQL</li>
<li class="myMenu">PHP</li>
</ul>
</body>
</html>
.myMenu:nth-child(2){color:red} 이므로 myMenu 클래스의 두 번째 엘리먼트에 텍스트 색 red를 적용하고
마찬가지로 myMenu를 사용하는 엘리먼트가 총 5개이므로
.myMenu:nth-last-child(4){color:red}를 사용해서 아래에서 4번째 엘리먼트에 택스트 색 red를 적용할 수 있습니다.
📚 참고
참고 서적 - 웹코딩 시작하기 (저자 김태영)
반응형
'🌐WEB' 카테고리의 다른 글
| [CSS3] 텍스트가 영역을 벗어날 때 해결법 (overflow 속성) (0) | 2021.10.11 |
|---|---|
| [CSS3] 텍스트를 꾸미는 CSS 요소들 정리 (0) | 2021.10.11 |
| [WEB] PC에서 실행중인 localhost 페이지를 모바일에서 확인하는 방법 (3) | 2021.06.01 |
| [WEB] jQuery Autocomplete 검색어 자동완성 예제 (0) | 2021.05.03 |
| [WEB] JavaScript로 HTML 문서에 실시간 시간 표시하기 (2) | 2021.04.15 |