2023 새로운 css by.google

자주 쓰일듯 한 css

n번째 요소 선택

:nth-child(3)	//3번째 하위 요소
:nth-child(n+3)	//3번째 하위 요소부터 끝까지 모두
:nth-child(-n+3)	//첫번째부터 3번째까지 모든 하위 요소
:nth-child(n+3):nth-child(-n+5)		//3번째부터 5번째까지의 하위요소

:nth-child(2 of .highlight)		//.highlight 클래스를 가진 하위 요소 중 두번째 요소
.highlight:nth-child(2) 	//두번째 요소이면서(and) highlight 클래스를 가진 요소

 

특정 요소 선택

@scope (.card){
  img{
    border-color: red;
  }
}
//card 클래스 내부에 있는 img 만 선택

@scope (.card) to (.card__content) {
    img {
        border-color: green;
    }
}
//card와 card__content 요소 사이에 있는 img 만 선택

 

내부 요소 정렬

grid-template-rows: subgrid;	//해당 요소 정렬(상위요소가 display: grid 여야함)

 

@media 대신 @container

@media : viewport 기준 반응형

@container : 특정요소 기준  반응형

 

:has() 선택자

.card:has(.card__media) {color: #red;}	//card__media를 가진 card
li:has(+ li:hover)	//마우스오버된 li앞의 li

 

 

 

https://developer.chrome.com/blog/css-wrapped-2023?hl=ko

CSS 래핑: 2023년  |  Blog  |  Chrome for Developers

https://inpa.tistory.com/entry/%F0%9F%8C%9F-css-container-%EC%82%AC%EC%9A%A9%EB%B2%95

🌟 @media는 이제 그만 ! 최신 @container 사용법