Css 선택자 부분 선택자(Partial Selector) + 가상 클래스(Pseudo Class)

클래스, 아이디 이름으로 선택

div[class="클래스이름"]
div[id="아이디"]

/* 선택자 설명 : <ul class="menu">의 자식인 <li> 태그들이 선택 */
ul[class="menu"] li{
    color: red;
}

시작하는 이름으로 선택

div[class^="클래스이름일부"]
[id^="아이디일부"]

/* 예시: 아이디가 "side-"로 시작하는 요소를 선택하고, 
선택된 요소와 그 하위 요소들에 빨강색으로 텍스트 색상이 상속되어 적용. */
[id^="side-"]{
    color: red;
}

Css 선택자 고급 - 가상 클래스(Pseudo Class)

:first-child, :last-child

부모 요소의 전체 자식 요소들 중 첫 번째, 또는 마지막 요소를 선택하는 가상 클래스이다.
자식 요소들의 순서를 기준으로 첫 번째, 또는 마지막 요소를 선택한다.

<article>
  <h1 class="item">섹션 타이틀</h1>
  <p class="item"> 문단1 </p>
  <p class="item"> 문단2 </p>
  <p class="item"> 문단3 </p>
</article>

/* '섹션 타이틀'을 선택하는 가상 클래스 */
article h1:first-child{}
article .item:first-child{}

/* 아무런 요소를 선택하지 못한다. */
article p:first-child{}

article의 자식 요소들 중 첫 번째이면서 p태그를 선택해야 하기 때문에 두 번째 선택자는 어떤 태그도 선택하지 못하는 현상이 발생한다.

** ⭐️⭐️⭐️ 자식 요소를 선택할 때는 순서상 가상 클래스가 동시에 충족되어야 하는 조건임을 명심**

nth-child(n), nth-last-child(n)

선택한 부모 요소의 자식 요소들 중 n번째 오는 자식 요소들을 선택.

서수로 시작하면 n은 1에서 시작하지만,
수식으로 변수를 사용할 경우 n은 0에서 시작한다.

nth-child는 처음 요소부터,
nth-last-child는 마지막 요소부터 선택한다.

<article>
  <h1 class="item">섹션 타이틀</h1>
  <p class="item"> 문단1 </p>
  <p class="item"> 문단2 </p>
  <p class="item"> 문단3 </p>
</article>

/* '섹션 타이틀'을 선택하는 선택자 */
article .item:nth-child(1){}

/* '섹션 타이틀', '문단2'을 선택하는 선택자 */
article .item:nth-child(2n+1){}

:first-of-type, :last-of-type

부모 요소의 자식 요소들 중에 특정 선택자 태그인 첫 번째, 또는 마지막 요소를 선택하는 가상 클래스이다.

<article>
  <h1 class="item">섹션 타이틀</h1>
  <p class="item"> 문단1 </p>
  <p class="item"> 문단2 </p>
  <p class="item"> 문단3 </p>
</article>

/* '문단1' 선택하는 선택자 */
article p:first-of-type{}

/* '섹션 타이틀', '문단1' 2개를 선택하는 선택자. */
/* 클래스 선택자로 선택하면 자식 요소들 중 
각 태그별로 첫 번째 나오는 요소를 모두 선택*/
article .item:first-of-type{}

nth-of-type(n), nth-last-of-type(n)

선택한 요소의 자식 요소들 중 n번째 오는 특정 태그인 자식 요소들을 선택한다.

<article>
  <h1 class="item">섹션 타이틀</h1>
  <p class="item"> 문단1 </p>
  <p class="item"> 문단2 </p>
  <p class="item"> 문단3 </p>
  <p class="item"> 문단4 </p>
</article>

/* '문단1', '문단3'을 선택하는 선택자. */
article p:nth-of-type(2n+1){}
/* '문단2', '문단4'을 선택하는 선택자 */
p:nth-last-of-type(2n+1){}

not(x)

"x"는 태그, 또는 클래스 이름을 사용할 수 있습니다.

부모 요소의 자식 요소들 중 "x"인 태그 or 클래스가 아닌 요소를 모두 선택합니다.
필요 없는 요소(들)을 제외하고 나머지 모든 자식 요소들을 선택해야 할 때 사용할 수 있습니다.

<article>
  <h1 class="item">섹션 타이틀</h1>
  <p>문단1</p>
  <p class="item">문단2</p>
  <p class="item">문단3</p>
  <p class="item">문단4</p>
</article>

/* article 태그의 자식 요소들 중 p 태그를 가진 요소들 중에서 
.item 클래스가 없는 요소만을 선택 - '문단1'만 선택 /*
article p:not(.item)

:link, :hover, :active, :visited

링크 요소(마우스 클릭에 반응하는 요소)의 다양한 상태를 표현하는데 사용하는 가상 클래스입니다.
태그 또는 클래스가 적용된 요소에 마우스동작에 따른 반응 인터페이스를 구현할 때 사용한다.

/* :link 방문하지 않은 링크 */
a:link{
    color:~
}

/* :hover 마우스 커서가 요소 위에 위치할 때 */
a:hover{
    color:~
}

/* :visited 방문한 링크 */
a:visited{
    color:~
}

/* :active 링크 활성화 상태 */
a:active{ 
    font-weight:bold;
}

:focus, :focus-within

클릭하거나 탭 했을 때, 또는 포커스를 받을 수 있는 요소를 탭 키를 사용해 이동 선택한 경우
→ 요소에 포커스가 가면서 선택자 속성이 적용된다.
→ 현재 포커스가 위치한 요소를 확실히 알 수 있도록 속성을 부여할 수 있다.
다음 코드처럼 폼의 입력 요소에 포커스가 위치하면 빨강색 테두리 속성을 부여해 구분이 되도록 할 수 있다.

form input:focus{
    border: 3px solid red;
}

focus-within 가상 클래스는 포커스가 위치한 요소를 포함하고 있는 요소에 속성을 부여하고 싶을 경우 :focus-within 선택자를 사용할 수 있다.

<form name="myform">
  <p>
    로그인
  </p>
  <input type="text" name="userId" size="20" maxlength="20" placeholder="테스트"/>
</form>

/* 이 경우에 로그인이 'blue' */
form:focus-within{
    color: blue;
}

focus-within 가상 클래스를 활용한 안내 메시지 표시방법

<form name="myform">
  <p>로그인</p>
  <span class="msg">폼에 포커스 위치하면 메시지가 표시</span>
  <input type="text" name="userId" size="20" maxlength="20" placeholder="테스트"/>
</form>

/* 적용 Css */
form span.msg{
    display: none;
}


/* 폼에 포커스가 위치하면 그 안의 메시지에 속성을 지정 */
form:focus-within span.msg{
    color: red;
    display: block;
}

:checked

체크 박스 또는 라디오 박스 체크 속성을 위한 전용 가상 클래스.
다른 요소에는 사용할 수 없다.
checked 태그 속성이 켜지거나 꺼진 상태에 따라 가상 클래스의 적용 여부가 결정.

/* 체크된 입력 필드의 라벨 텍스트 색상을 red로 변경 */
input:checkd + label{
    color: red;
}

/* 체크된 라디오버튼 크기 키움 */
/* radio → checkbox로 변경시 체크된 체크박스 크기 키움 */
input[type="radio"]:checked{
    width: 20px;
    height: 20px;
}

가상 클래스의 범위 제한

선택하는 범위를 명확하게 제한하지 않으면, 예상했던 것과는 전혀 다른 요소들이 선택된다.
지나치게 많은 요소를 한꺼번에 선택하면, 렌더링 속도와 화면 갱신에 영향을 주게 되므로 주의해서 사용해야 한다.

: 특별한 경우가 아니면 "p:hover"와 같은 일반 태그에 가상 클래스를 전역으로 정의해 사용하는 것은 추천하지 않는다.

출처 : HTML&CSS 마스터북