:not 에 대해서 알아보겠습니다.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>:not 예제 예시</title>
</head>
<body>
<ul>
<li>테스트1</li>
<li>테스트2</li>
<li>테스트3</li>
<li>테스트4</li>
</ul>
</body>
</html>이런 html에 css를 추가해보겠습니다.
li {color:blue} /*li는 모두 파란색 글씨*/li 전부 파란색이 되었네요.
조건을 하나 더 추가해보겠습니다.
li {color:blue} /*li는 모두 파란색 글씨*/
li:not(:first-child){color:red} /*첫번째 li만 아니라면 모두 빨간색 글씨*/첫번째 li를 제외하고 모든 li가 빨간색으로 변했네요.
css
li {color:blue} /*li는 모두 파란색 글씨*/
li:not(:first-child){color:red} /*첫번째 li만 아니라면 모두 빨간색 글씨*/
li:not(:last-child){border-bottom:5px solid green;} /*마지막 li만 아니라면 li아래 초록색 선긋기 */마지막 li를 제외하고 모든 li에 촌시러운 초록색 선이 그어졌습니다.
728x90
'프로그램 강좌' 카테고리의 다른 글
| [LeetCode] 1: TwoSum - javascript (0) | 2021.11.17 |
|---|---|
| CSS 지원 브라우저 확인 (0) | 2021.09.27 |
| [git]SSL certificate problem (0) | 2021.07.02 |
| TheMovieDB 가입 및 토큰 발급 방법 (0) | 2021.06.30 |
| 와콤 태블릿 윈도우 잉크 기능 끄기 (0) | 2021.06.29 |
