so woon!

[의사 클래스] Not 의사 클래스(Pseudo Class) 본문

CSS/개념정리

[의사 클래스] Not 의사 클래스(Pseudo Class)

xowoony 2022. 9. 7. 09:09

학습일 : 2022. 09. 05

Not 의사 클래스
Not 의사 클래스(Pseudo Class)는 다른 의사 클래스를 부정하기 위해 사용한다.
다음과 같이 작성한다. ("는 없는 것으로 한다.)

  "선택자":not(:"다른 의사 클래스") {
      "속성" : "속성 값";
      "속성" : "속성 값";
      "속성" : "속성 값";
  }


가령, 마지막 요소가 아닌 모든 요소는 다음과 같이 선택한다. 

  *:not(:last-child) { . . . }
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>not 의사 클래스</title>
    <style>
        body > div > div:not(:last-child)❤ {
            background-color: red;
            border-bottom: 0.0625rem solid black;
        }
    </style>
</head>
<body>
    <div>
        <div>냉장고</div>
        <div>청소기</div>
        <div>세탁기</div>
        <div>건조기</div>
        <div>TV</div>
    </div>
</body>
</html>

===========실행결과==========

저작자표시 비영리 변경금지

'CSS > 개념정리' 카테고리의 다른 글

[속성] color 속성  (0) 2022.09.07
[속성] background-image 외 속성들  (0) 2022.09.07
[의사 클래스] Focus 의사 클래스(Pseudo Class)  (0) 2022.09.07
[의사 클래스] first-of-type 및 nth-of-type, last-of-type 의사 클래스  (0) 2022.09.07
[의사 클래스] first-child 및 nth-child, last-child 의사 클래스  (0) 2022.09.07
'CSS/개념정리' Related Articles more
Comments