CSS의 선택자 중 가상클래스 선택자, 가상요소 선택자에 대한 글을 작성해보았습니다. 개념을 설명하는데 어려움이 있어서 내용이 서툴어 보이고 이해가 어려울지도 모릅니다.

---

[CSS선택자(2)]

[가상클래스 선택자]

( Pseudo-Class Selector )

형태 : (선택자):(조건) { (내용) }

[조건의 값]

• :first-child : 해당 선택자가 포함된 요소 중 첫 번째 자식을 선택.

  주의) 자식 중에서 첫번째 요소가 선택됨. 첫 번째 자식에 해당 선택자를 가지지 않고 두 번째 자식부터 가지고 있을 경우, 아무것도 선택되지 않음.

  /* 예시(CSS) */
  .game:first-child {
    color : green;
  }

  <!-- 예시(HTML) -->
    <ul>
  	<li>SMB</li> <!-- 효과 미적용 -->
      <li class="game">BOTW</li>
      <li class="game">Mother</li>
      <li class="game">PKMN</li>
    </ul>
  <!-- 자식 요소 중 class가 game인 요소가 두 번째부터 시작.
  	CSS는 class 값을 찾기 전에 첫 번째 자식인지부터 확인하므로
  	여기에 효과가 적용되는 요소가 없다. -->

• :last-child : 해당 선택자가 포함된 요소 중 맨 끝번째 자식을 선택.

• :nth-child(숫자 or 함수 식) : 특정 번호의 순서에 해당되는 자식요소 선택.
  괄호안에 숫자 말고도 특정 키워드값을 이용해 함수식으로도 이용 가능.

  괄호안에 들어가는 키워드값 종류

  • n : 0부터 시작하는 모든 양의 정수. An + B 형태처럼 수식 가능.
    • 2n : 양의 짝수 선택
    • 2n-1 : 양의 홀수 선택
  • odd : 형제 요소에서 홀수번째인 요소
  • even : 형제 요소에서 짝수번째인 요소

• :first-of-type : 형제 요소 중 자신의 유형과 일치하는 타입들 중 첫 번째 요소 선택.

  주의) 선택자로 class를 선택했을 때, 형제 태그에서 각 첫번째 태그에 영향을 줌.

  /* 예시(CSS) */
  .game:first-of-type {
    color : green;
  }

  <!-- 예시(HTML) -->
    <section>
  	<div class="game">SMB</div>  <!-- 효과 적용 -->
      <p class="game">BOTW</p>  <!-- 효과 적용 -->
      <p class="game">Mother</p>
      <p class="game">PKMN</p>
    	<div class="game">DK</div>
    	<span class="game">CrazyBus</span>  <!-- 효과 적용 -->
    </section>

• :last-of-type : 형제 요소 중 자신의 유형과 일치하는 타입들 중 맨 끝번째 요소 선택.

• :nth-of-type() : 형제 요소 중 자신의 유형과 일치하는 타입들 중 (괄호 안의 값)번째 요소 선택. 이때 괄호 안의 값은 nth-child와 동일하게 사용할 수 있습니다.

• :not(선택자) : 콜론(:) 앞에 있는 셀렉터를 가진 요소 중, 괄호에 있는 선택자를 제외한 나머지.

[동적 가상클래스 선택자]

사용자의 동작에 따라 요소의 스타일 변경 가능. 사용하고자 하는 기능이 단순히 스타일링만을 위한 용도로 쓰일 때 사용.

[하이퍼링크]

• :link : 방문한 적 없는 링크 텍스트 선택
• :visited : 한 번 이상 방문한 링크 텍스트 선택

  • 웹사이트 방문 여부는 브라우저별로 방문 기록을 통해 알 수 있습니다. 방문 기록을 지우면 방문한 적이 없는 사이트로 인식합니다.
  • input태그의 경우, type속성의 값에 따라 다른 결과물이 나오므로 속성 선택자를 사용합니다.
    ( ex) input[type=submit]:link { (내용) }

[마우스를 대거나 클릭할 대상]

• :hover : 마우스에 닿은 대상에 영향을 줌.(포인터에 닿은 버튼 표시)
• :active : 대상에 마우스를 클릭하고 있을 떄 효과 발생.(버튼 눌림 효과)

  작성 시 주의) 클릭할 대상이 링크일 때, 링크를 적절히 디자인 하려면 LVHA 순서(:link-:visited-:hover-:active)로 작성할 것.
  위의 다른 3개의 링크 의사 클래스가 :active를 덮어쓰기 때문입니다.

• :focus : 특정 요소가 포커싱(집중) 되었을 때. ( ex) tab키를 이용하여 키보드로 버튼 선택, 텍스트 창 선택하는 경우. )

[input 요소]

• :enabled : 활성화된 요소를 스타일링 (ex) 입력가능한 텍스트 창)
• :disabled : 활성화되지 않은 요소를 스타일링 (ex) 입력 불가능한 텍스트 창)
• :checked : 체크표시가 된 요소를 스타일링 (ex) radio, checkbox의 선택 유무)

[가상요소 선택자]

실존하지 않는 요소 또는 범위를 만들어 적용.

형태 : (선택자)::(조건) { (내용) }

가상클래스 선택자와 달리 콜론(:) 두 개가 들어갑니다. 하나만 써도 작동되는 것도 있지만, 안되는 것도 있으므로 가급적이면 콜론 두 개를 붙여주시기 바랍니다.
CSS3부터 가상클래스 선택자와 구분하기 위해 콜론의 갯수를 다르게 이용하는 것으로 권고안이 나왔기 때문입니다.

• ::before : (뱃지, 구분점, 구분바 추가 시 사용.) 텍스트 앞에 가상의 요소 추가

• ::after : 텍스트 뒤에 가상의 요소 추가
  이 때, 텍스트 바로 옆에 붙은 가상의 요소는 마우스로 선택되지 않습니다.

  /* 예시(CSS) */
  .favorite::before {
    content: 'FAV.';
    color: indianred;
  }
  .new::after {
    content: 'NEW';
    color: blue;
  }

  <!-- 예시(HTML) -->
    <div class="movie">A</div>
    <div class="movie favorite">B</div>
    <div class="movie">C</div>
    <div class="movie new">D</div>
    <div class="movie">E</div>
    <div class="movie favorite new">E</div>

• ::first-letter : 요소의 내용의 첫 번째 글짜에 효과를 줌.

  요소의 내용 뿐만 아니라 선택자 ::before 같은 가상의 텍스트에도 영향을 줍니다.

  <!-- 예시(HTML) -->
  <p class="lorem">Lorem ipsum.</p>

  /* 예시(CSS) */
  .lorem:first-letter {
  	color:red;
      font-size:38px;
  }
  .lorem::before {
  	content:'Before ';
  }

  위 예제에서 개발자 도구로 들어갈 시, p태그에 가상 요소인 before값이 들어간 것을 확인할 수 있고, 'Before' 를 포함한 문장으로 인식합니다.

• ::first-line : 첫 번째 줄에 효과를 줌. 여기서 첫 번째 줄은 브라우저의 가로 폭에 따른 첫 번째 줄을 의미.

• ::selection : 글자를 드래그 할 때 나타나는 표시를 스타일링.