/* 전체 선택자 */
* {
  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::before{
  content: "첫번째 자식 요소";
}
h1::after{
  content: "마지막 자식 요소";
}

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

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

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


/* 선택자 그룹화 */
h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
  background-color: yellow;
  color: black;
}

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

: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;
}