*,
body *::before,
body *::after {
  box-sizing: border-box;
}

/* 전체 선택자 */
* {
  color: orange;
}

body * {
  color: violet;
}

/* 요소 선택자 */
html {
  /* 기본 글자 크기 -> 16px */
  /* 기본 글자 크기가 10px로 지정 */
  font-size: 0.625em;
}
p {
  color: blue;
}

/* class 선택자 */
.likelion {
  color: green;
}

/* id 선택자 */
#techit {
  color: red;
}

/* 속성 선택자 */
[title] {
  color: pink;
}

/* 자손 결합 선택자 */
p span {
  color: skyblue;
}

/* 자식 선택자 */
p > span {
  text-decoration: underline;
}

/* 가상 요소 */
/* h1 전 */
h1::before {
  content: "첫번째 자식 요소";
}
/* h2 후 */
h1::after {
  content: "마지막 자식 요소";
}
/* p 첫번재 글짜 */
p::first-letter {
  font-size: 3.5rem;
}
/* 선택 */
::selection {
  background-color: #fff;
  color: white;
}

/* 가상 클래스 */
:root {
  font-size: 0.75em;
}

/* 가상 클래스를 이용한 선택자 그룹화 */
:is(h1, h2, h3, h4, h5, h6) span {
  background-color: salmon;
  color: blue;
}
/* 선택자 그룹화 */
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
  background-color: yellow;
  color: black;
}

/* 이거는 이기지 못함 우선순위가 뒷순위이다..  */
:where(h1, h2, h3, h4, h5, h6) span {
  background-color: lightgreen;
  color: red;
}

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