CSS4 Selector

:matches

matches라는 Pseudo-classes는 특정 element 및 조건을 그룹화하여 속성을 적용할 수 있다. 아래는 짝수와 target 클래스인 li element의 배경 색상을 blue로 지정한 코드이다.

li:matches(:nth-child(even), .target) {
    background-color: blue;
}

---

:not

matches와 다르게 해당 속성을 제외하고 나머지가 적용되는 Pseudo-classes이다.

li:not(.target) {
    background-color: blue;
}

---

CSS Variable

변수 이름를 선언하고 속성 값을 넣어준다. 변수 이름 앞에는 항상 --가 붙는다. 아래는 변수를 사용한 예시 코드이다.

:root {
    --awesomeColor: 1px solid red;
}

li:first-child a {
    border: var(--awesomeColor);
}

---

@custom-selector

@custom-selector는 selection of element로 리스트, 링크, 문단 등의 element를 global하게 속성을 변경할 수 있다.

@custom-selector :--headers h1, h2, h3, h4, h5, h6;


:--headers {
    color: #f19292
}

<h1>title</h1>
<h2>title</h2>
<h3>title</h3>
<h4>title</h4>
<h5>title</h5>
<h6>title</h6>

---

@custom-media and Media Query Ranges

--를 붙인 변수 이름과 괄호 사이에 조건문(Media Query Ranges)을 적어준다. 이후에 @media에는 변수 이름을 선언하고 element property를 지정해준다.

@custom-media --ipad-size (450px < width <= 850px);

@media(--ipad-size) {
    body {
        background-color:azure;
    }
}

---

color-mod

PostCSS에서 더이상 color-mode를 지원해주지 않으므로 따로 설치가 필요하다. 관련 내용 참고

1. Terminal에서 npm i postcss-color-mod-function -D 실행

2. package.json에서 plugin 등록

   "postcss": {
     "plugins": {
    "postcss-preset-env": {
      "stage": 0
    },
    "postcss-color-mod-function": {
   
    }
     }
   }
   

color-mod는 색상 작업을 보다 직관적으로 할 수 있게 해주는 기능이다. 아래는 hover하면 색상이 20% 어두워지도록 하는 코드이다.

h1 {
    color: #446d83;
}


h1:hover {
    color: color-mod(#446d83 blackness(20%));
}

---

gray()

텍스트 등의 밝기 조절을 할때 유용한 function이다.

h1 {
    color: gray(50);
}

---

system ui

사용자의 기본 OS System font를 사용하게 한다. 특정 폰트 이름을 주는 것보다 더 간편하게 사용할 수 있는 shortcut이다.

h1 {
    font-family: system-ui;
}

---

Nesting Rules

nesting은 selector를 더 줄일 수 있고 &를 사용해 HTML 태그처럼 CSS도 트리 구조로 정리할 수 있게 되었다.

main {
    background-color: skyblue;
    & section {
        background-color: orange;
        width: 500px;
        & li {
            background-color: grey;
            width: 250px;
            & a {
                color: white;
                &:hover {
                    font-size: 30px;
                }
            }
        }

    }
}

참고! nesting selection이 더 자세할 수록 우선순위가 있고 그걸로 override 된다.

CSS Grid Kiss

참고하면 좋은 사이트

Practice FlexBox Practice Grid code sandbox