[CSS]선택자 결합자, 가상(의사) 클래스, 가상(의사) 요소

이번 블로그 글은 선택자에 관한 내용을 정리해 보려한다. 

지극히 내가 보기 위한 글이므로 기본선택자(클래스, 타입, 아이디, 전체) 를 제외한 그 외에 것들을 적어내려가보겠다 

 

 

결합자

자손 선택자 (       )

자손선택자는 내 밑의 모든 후손을 전역 선택할때 쓰는 선택자이다. 사용법은 조상과 자손 사이에 공백을 두면서 사용하면 된다.

자손 선택자는 바로 하위에 있는 자손을 선택하지 않아도 된다.

<style>
	ul li { color: red;}  /* li, p 태그 모두 red 적용 */
    ul p {color: red;} /* p 태그만 red로 변경 { */
</style>

<ul>
  <li>자식<p>손자</p></li>
  <li>자식<p>손자</p></li>
</ul>

 

자식 선택자 ( > )

자식선택자는 내 바로 밑의 자식을 선택할 때 쓰는 선택자이다. 자손선택자와는 다르게 바로 밑의 자식만 선택할 수 있으며 자식 이후 후손은 선택하지 않는다.

<style>
	ul > li { color: red;}  /* li, p 태그 모두 red 적용 */
    ul > p {color: red;} /* 모두 적용되지 않음 */
</style>

<ul>
  <li>자식<p>손자</p></li>
  <li>자식<p>손자</p></li>
</ul>

 

✅ 자손과 자식 선택자의 가장 큰 차이점은 전역으로 선택할 수 있는지의 여부이다.

 

인접 형제 선택자 ( + )

같은 부모 밑에 있는 형제 요소중 바로 다음에 오는것을 선택할 때 쓰는 선택자이다. 

아래 예시처럼 바로 다음에 오는 형제 요소를 선택하지 않으면 적용이 되지 않는다.

<sytle>
	.li-01 + .li-02 { color: red;} /* .li-02 의 있는 li와 p 만 red로 적용 */
    .li-01 + .li-03 { color: red;} /* 모두 적용되지 않음 */
</style> 

<ul>
    <li class="li-01">자식<p>손자</p></li>
    <li class="li-02">자식<p>손자</p></li>
    <li class="li-03">자식<p>손자</p></li>
</ul>

 

일반 형제 선택자 ( ~ )

일반 형제 선택자는 인접 형제 선택자와는 다르게 바로 다음에 오는 형제를 선택하지 않아도 된다. 같은 부모를 공유 하고 있는 h1 의 형제 p태그가 있을시 h1 ~ p 사용시 h1 뒤에 있고 같은 부모를 공유하는 모든 p  태그를 선택하게 된다.

주의⚠️ㅣA ~ B 를 했을때 선택되는 조건은 1. 같은 부모 공유 2. A의 뒤에 있는 요소  3. B와 똑같은 요소 (같은 태그)

 

<style>
	h1 ~ p { color: red; } /* h1 뒤에 있고 선택된 p와 같은 요소인 형제들만 빨강으로 변함 */
</style>

<div class="parent">
    <p>빨강이 아닙니다.</p>
    <h1>얘 뒤에 있는 애를 선택할거임</h1>
    <p>빨강입니다.</p>
    <h1>빨강이 아닙니다.</h1>
    <h3>빨강이 아닙니다.</h3>
    <p>빨강입니다.</p>
</div>

위 코드의 결과 이미지 입니다.

 

 

 

 

의사(가상) 클래스, 요소

의사(가상) 클래스 ( : )

실제로 존재하는 요소에 특정 이벤트나 환경에 맞춰 가상으로 클래스를 줘서 css로 제어하는 것을 말한다.

• :first-child  부모 안의 모든 요소중 첫번째 요소
• :last-child  부모 안의 모든 요소중 마지막 요소
• :not(인수)  인수가 아닌 것들 단, 형제가 아니어도 선택됩니다.

<style>
	p:first-child { color:red; }
	p:last-child { color:red; }
	p:not(.select) { text-decoration:underline; }
</style>

<div class="parent">
    <p class="select">빨강입니다</p>
    <h1>빨강도 아니고 밑줄도 안생김</h1>
    <p>밑줄 생김</p>
    <h1>빨강도 아니고 밑줄도 안생김</h1>
    <h3>빨강도 아니고 밑줄도 안생김</h3>
    <p>빨강이고 밑줄도 생김</p>
</div>

<div>
    <p>빨강이고 밑줄도 생김</p>
</div>

결과 이미지

 

• A:nth-child(N)  같은 부모를 공유하는 형제 요소중 N 번째
  ⚠️단, A:nth-child(2)를 했을경우 2번째 요소가 A가 아니라면 선택되지 않습니다.

<style>
li:nth-child(3) { color: red; } /* 임의의 3번째 행 */
li:nth-child(even) { color: red; } /* 모든 짝수행 */
li:nth-child(odd) { color: red; } /* 모든 홀수행 */
li:nth-child(2n) { color: red; } /* 함수형 표현방식: 모든 짝수행 */
li:nth-child(2n+1) { color: red; } /* 함수형 표현방식: 모든 홀수행 */
li:nth-child(n+7) { color: red; } /* 함수형 표현방식: 7번째 와 그 이후 모든 행 */
li:nth-child(-n+7){ color:red; } /* 함수형 표현방식: 7번쨰와 그 이전 모든 행 */
</style>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    	.
        .
        .    
</ul>

• A:nth-of-type(N)  동일한 유형(태그 이름)의 형제 요소중 N 번째

<style>
	p:nth-of-type(2) { color:red; } 
</style>

<div class="parent">
    <p class="select">빨강 아님</p>
    <h1>빨강 아님</h1>
    <p>빨강색임</p>
    <h1>빨강 아님</h1>
    <h3>빨강 아님</h3>
    <p>빨강 아님</p>
</div>

 

의사(가상) 요소 (::)

실제로 존재하는 요소에 가상으로 클래스를 주던 가상클래스와는 다르게 실제로 존재하지 않는 가상의 요소를 만들어 스타일을 주는 것을 말한다.

 

• ::after 선택한 요소의 맨 마지막에 자식으로 요소 하나 생성
• ::before 선택한 요소의 첫 자식으로 요소 하나 생성

<style>
	p::before{content:'안녕하세요'; color: red;}
	p::after{content:'개발자입니다.'; color: green;}
</style>

<p>저는 노태희이고</p>

결과 이미지

콘솔로 확인시 p의 자식으로 가상요소들이 들어와 있는걸 확인할 수 있다.