/* 전체 선택자 */

* {
  color: orange;
}

body * {
  color: violet;
}

/* 요소 선택자(타입 선택자/엘리먼트 선택자) */

p {
  color: blue;
}

html {
  font-size: 0.625em;
}

/* class 선택자 (class="") */

.likelion {
  color: green;
}

/* id 선택자 (id="") */

#techit {
  color: red;
}

/* 속성 선택자 (title="") */

[title] {
  color: pink;
}

/* 자손 결합 선택자 */

p span {
  color: skyblue;
}

/* 자식 선택자 */

p > span {
  text-decoration: underline;
}

/* 가상 요소 */
h1::before {
  content: "첫번째 자식 요소";
}
h1::after {
  content: "마지막 자식 요소";
}
/* 페이지에서 ctrl+a 를 눌러 선택되지 않는 부분이 가상 요소이다 */

p::first-letter {
  font-size: 3.5rem;
}

::selection {
  background-color: darkblue;
  color: white;
}

/* 가상 클래스 */

:root {
  font-size: 0.75em;
}

/* 선택자 그룹화 */

/* h1 {
  background-color: yellow;
  color: black;
}
h2 {
  background-color: yellow;
  color: black;
} 
  위와 같은 방식은 비효율적*/
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
  background-color: yellow;
  color: black;
}
/* 조금 더 편한 방식*/

/* 가상클래스를 이용한 선택자 그룹화 */

:is(h1, h2, h3, h4, h5, h6) span {
  background-color: salmon;
  color: blue;
}

:where(h1, h2, h3, h4, h5, h6) span {
  background-color: lightgreen;
  color: red;
}
/* is를 없애면 where에 해당하는 스타일이 보임 */

h6:has(+ p) {
  border: solid 1px green;
  padding: 10px;
}

p:has(strong) {
  border: solid 1px red;
  padding: 10px;
}