CSS) 다중 선택자 (Selector) - 선택자가 여러개일 경우

1. 여러 요소를 동시에 선택

 

 

.class1,  .class2,  .class3 

 

각 선택자마다 쉼표(,)로 구분할 경우

각각의 항목을 OR로 적용함.

즉, class1, class2, class3 모두에 스타일이 적용됨.

 

 

 

.class1 .class2 .class3

쉼표 없이 공백으로 구분하여 사용시

뒤에 나온 선택자가 하위 개체로 지정됨.

 

즉, class1 

       ㄴ class 2

               ㄴ class 3 으로 지정되고,

 

class1 요소 내부의 class2 요소 내부의 class3 요소에만 스타일이 적용됨.

 

 

 

.class1.class2.class3

공백 없이 연결해서 지정시

 

class="class1 class2 class3"에 해당하는 요소에만 스타일이 적용됨.

즉, AND 처리 되는 것. (class1이면서 class2면서 class3인 요소에만)

 

 

 

 

2. 가상 클래스 / 가상 요소

https://mywebproject.tistory.com/86

html) 가상 요소(Pseudo-element)와 가상클래스(Pseudo-class)

 

가상 요소(Pseudo-Element)

가상요소(Pseudo-Element)는, 가상클래스처럼 선택자(selector)에 추가되며,
존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능함.

 

::first-line	요소의 텍스트 중 첫 줄
::first-letter	요소의 첫번째 글자
::before	요소의 컨텐츠 시작부분
::after	요소의 컨텐츠 끝부분
::selection	요소의 텍스트 중 선택된 영역(drag)
::placeholder	input 필드 힌트 텍스트인 placeholder

 

가상 클래스(Pseudo-Class)

선택한 요소가 특별한 상태여야 만족할 수 있음.
예를 들어 :hover를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있음.

 

대표적인 가상 클래스 예.

:link	방문 안한 링크
:visited	방문한 링크
:active	링크 누를때
:hover	링크에 마우스 올릴때
:focus	요소가 포커스될때 (키보드 or 문자입력양식)
:first-child	요소의 첫번째 자식요소
:first-line	블록 요소 문단의 첫번째 줄
:first-letter	블록 요소 첫줄에 첫번째 문자
:before	요소 내용 앞에 추가할 태그 지정 (content 속성 필요)
:after	요소 내용 뒤에 추가할 태그 지정 (content 속성 필요)

 

 

 

3. 부모/자식 요소

div > p

<div>
	<p> 이곳이 선택 </p>
</div>

 

부모 요소가 div인 p요소만 선택됨.

** 주의 - 바로 위 부모요소가 div여야함.

 

예를들면, div->strong->p 와 같은 경우에는 적용 안됨. 

 

 

 

+) 가상클래스 중, first-child 와 last-child로 

부모요소의 첫번째 자식 개체와 마지막 자식 개체를 모두 선택할 수 있음.

-> 즉, 부모요소의 처음이나 끝에 해당 태그가 있으면 선택됨.

 

 

 

4. 속성이 있는 요소

 

a[target]

target 속성이 부여된 a태그에 스타일이 적용된다.

 

html 예> 

<a href="www.thisisyjin.com" target="_blank">

주의 - 속성 이름을 작성해야함. 속성값(value)를 작성하면 안됨.

 

 

 

[target = _blank]

target 속성의 값이 _blank인  요소에 스타일이 적용된다.

 

 

 

 

REFERENCE

 

• https://www.w3schools.com/cssref/css_selectors.asp

CSS Selectors Reference

• https://blog.naver.com/PostView.nhn?blogId=shinekjm&logNo=221618781015