:where(header, main, aside, footer) div {
  color: blue;
}

:is(header, main, aside, footer) div {
  color: blue;
}

where와 is

where는 명시도가 0이고, is는 명시도가 where보다 크다.(요소 선택자와 같다.)

두 개의 선택자 모두 낮은 명시도를 가지고 있다.

명시도 예시

몇 가지 명시도 예시를 살펴보자

where vs 요소 선택자 vs is

where 선택자의 명시도는 0이기 때문에 충돌시 요소 선택자가 적용된다.

is 선택자는 요소 선택자와 명시도가 같기 때문에 충돌시 늦게 작성된 선택자가 적용된다.

1
2
3

<div>
  <p>hi</p>
</div>

따라서 다음과 같은 css를 적용시 color grey가 먼저 적용된다.

1
2
3
4
5
6
7
8
9
10
11

:where(div) p {
  color: blue;
}

div p {
  color: red;
}

:is(div) p {
  color: grey;
}

하지만 is와 요소 선택자의 순서를 바꿀경우 color red가 먼저 적용된다.

1
2
3
4
5
6
7
8
9
10
11

:where(div) p {
  color: blue;
}

:is(div) p {
  color: grey;
}

div p {
  color: red;
}

1
2
3
4
5
6

white-space: nowrap;
/* 텍스트가 띄어쓰기 되지 않게 한다 */
overflow: hidden;
/* 띄어쓰기 되지 않게 하고 넘친 부분은 숨긴다.*/
text-overflow: ellipsis;
/* 요소에 넘치는 부분을 ...로 대체하게 된다.*/

1
2
3
4

display: -webkit-box (또는 -webkit-inline-box)
-webkit-box-orient: vertical
-webkit-line-clamp: 3 (integer)
overflow: hidden;

1
2
3
4

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;