선택자-가상클래스, 가상 요소

<가상클래스>

🔶:active

• 마우스 클릭하고 있을때 스타일이 적용됨.

🔶:hover

• 마우스를 올려놨을 떄 스타일이 적용됨.

🔶:visited

• 링크를 방문했으면 스타일이 적용됨.

/* :active - 마우스 클릭하고 있을떄 스타일이 적용됨. */
#btn1:active {
        background-color: royalblue; }
        
/* :hover - 마우스를 올려놨을 떄 스타일이 적용됨. */
#btn2:hover {
  background-color: burlywood; }

/* :visited - 링크를 방문했으면 스타일이 적용됨. */
   a:visited {
        color: green; }  

  <button id="btn1">btn1</button>
  <button id="btn2">btn2</button>
  <a href="http://www.apple.com">go to apple</a>

🔶:focus

• 키보드로 선택되었을 때 스타일이 적용됨.(tap키로 선택됐을때 적용됨.)

🔶:focus-within

• focused 상태인 자식을 가진 부모 요소에 적용됨.

/* :focus - input요소를 focused하면 input창이 코랄색으로 됨. */
      input:focus {
        background-color: coral; }
        
/* :focus-within
- 자식요소인 input요소에서 focused가 되면, 부모요소인 form요소에 빨간 선이 생김 */
      form {
        display: flex;
        flex-direction: column;
        padding: 30px; }
        
      form:focus-within {
        border: 1px solid red; }

  <form>
      <input type="text" placeholder="write anything" />
      <input type="text" />
      <input type="text" />
    </form>

<의사 요소(가상 요소)>

🔶 ::placeholder - placehoder 글자만 스타일적용됨. (input에 쓴 글자는 적용 안됨.)

form input:first-child::placeholder {
color: salmon;}

🔶::selection - 드래그로 긁을 때 발생.

p::selection {
background-color: skyblue; }

🔶::first-letter - : 첫 글자에만 적용됨.

 p::first-letter {
color: blue;
font-size: 30px; }

🔶::first-line - 첫 줄에만 적용됨.

p::first-line {
font-style: italic;}