It's easy, if you try

[웹/Web] CSS 기본 (2) - 선택자 본문

웹/CSS

[웹/Web] CSS 기본 (2) - 선택자

s5he2 2021. 3. 3. 11:41
반응형

css 작성 규칙에서 선택자는 규칙이 적용 되는 엘리먼트를 의미한다. 다양한 선택자들에 대해 알아보자.

🐻 선택자

HTML 문서에서 CSS 규칙 적용 타겟이 되는 다양한 종류의 CSS 선택자가 존재한다.

먼저 같은 엘리먼트에 두개 이상의 CSS 규칙이 정해진 경우 우선순위를 알아보자.

⚡️ CSS 규칙 적용 우선순위

  • 같은 엘리먼트에 두 개 이상의 CSS 규칙이 적용된 경우 마지막 규칙, 구제적인 규칙, !important가 우선 적용.
  • CSS 규칙들 중 하단에 작성한 규칙이  마지막 규칙 
  •  구체적인 규칙 : p {} 보다는 p b {}
  •  !important 
p b { color: green !important; }

 

이제 선택자의 종류와 의미, 사용법에 대해 알아보자.

선택자에는 일반 선택자, 복합 선택자, 가상 클래스 선택자, 가상 엘리먼트 선택자, 속성 선택자가 있다.

⚡️ 일반 선택자

선택자 의미 사용법
 전체 선택자  * {} html 문서 내 모든 element를 선택
 타입 선택자  h1 {} 매칭되는 element 선택
 클래스 선택자  .className {} 클래스명은 하이픈(-), 언더스코어(_), 대소문자로 시작 (기호나 숫자 시작 X)
 ID 선택자  #idName {} html 문서에서 동일한 ID를 중복 사용할 수 없다. Class 와 달리 ID는 유일해야 함. 일반 선택자 중 가장 우선순위가 높다.

 

⚡️ 복합 선택자

선택자 의미 사용법
 하위 선택자  element element {} 1단계 하위 요소(child)와 2단계 이상 하위요소(descendant)에 모두 적용.
 자식 선택자  element > element {} 1단계 하위 요소(child)에만 적용.
 인접 형제 선택자  element + element {} 형제 관계인 엘리먼트가 여러개 존재할 경우 첫번째 엘리먼트만 선택
 일반 형제 선택자  element ~ element {} 형제 관계인 엘리먼트가 여러개 존재할 경우 모든 엘리먼트를 선택.

하위 선택자 / 자식 선택자 예제

더보기 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Descendant Selector(하위선택자)</title>
	
	<style type="text/css">
	div div { background: blue; color: red; }
	div p { background: lightgray; color: skyblue; }
	div > div { background: green; color: orange; }
	div > p { background: purple; color: pink; }
	</style>
</head>
<body>
	<div>div Descendant Selector div
		<p>div > p Descendant Selector p</p>
		<div>div div Descendant Selector
			<span><div>
				<ul>
					<li><p>div p Descendant Selector</p></li>
				</ul>
			</div></span>
		</div>
	</div>
</body>
</html>

 

결과

인접 형제 선택자 / 일반 형제 선택자 예제

더보기 
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Sibling Selector(형제선택자)</title>
	
	<style type="text/css">
	div + p { background: lightgray; color: orange; }
	div.target ~ p { background: green; color: skyblue; }
	</style>
</head>
<body>
	<div>div Adjacent Sibling Selector div</div>
	<p>div + p 1 Adjacent Sibling Selector</p>
	<p>div + p 2 Adjacent Sibling Selector</p>
	<div class="target">div General Sibling Selector</div>
	<p>target ~ p 1 General Sibling Selector</p>
	<p>target ~ p 2 General Sibling Selector</p>
	<div>div Sibling Selector</div>
	<p>target ~ p 3 General Sibling Selector</p>
</body>
</html>

결과

 

 

⚡️ 가상 클래스 선택자

  • User Agent 가 제공하는 가상의 클래스를 지정.
  • 사용법은 가상 클래스 {} 이다.
선택자 의미
 :link  방문하지 않은 링크를 선택
 :visited  방문한 링크를 선택
 :hover  지정된 요소에 마우스가 올라간 경우 선택
 :active  지정된 요소가 활성화 된 경우 선택
 :focus  지정된 요소가 포커스를 가질 경우 선택
 :first-child  지정된 요소 중 부모의 첫 번째 자식 선택
 :last-child  지정된 요소 중 부모의 마지막 자식 선택
 :nth-child(n)  지정된 요소 중 n번째 자식 선택(n은 0부터 시작)
 :enabled  지정된 요소가 enabled인 경우 선택
 :disabled  지정된 요소가 disabled인 경우 선택
 :checked  지정된 요소가 checked인 경우 선택

예제

더보기

결과

- link

방문전

- visited

Daum 방문 후

- hover

Naver 에 마우스를 올렸을 때

- active

방문할 링크를 누른 상태로 떼지 않고 있으면 blue 색으로 나타내진다.

 

⚡️ 가상 엘리먼트 선택자

  • 보이지 않는 가상의 엘리먼트를 선택
  • ::가상 엘리먼트 {}
  • 가상 엘리먼트 표기법으로 CSS1 과 CSS2 에서 single colon(:)을 사용했음.
  • CSS3에선 가상 클래스와 가상 엘리먼트 구별을 위해 double colon(::) 으로 대체.
선택자 의미
 ::after  지정된 요소 뒤에 content 추가
 ::before  지정된 요소 앞에 content 추가
 ::first-letter  지정된 요소의 첫 번째 문자 선택
 ::first-line  지정된 요소의 첫 번째 라인 선택
 ::selection  사용자에 의해 선택된 요소의 위치 선택

예제

더보기

결과

 

⚡️ 속성 선택자

  • 특정한 속성을 가지거나 속성 값을 갖는 엘리먼트를 선택
  • 속성 선택자를 사용하기 위해서는 HTML 문서를 작성할 때에 name, title 등의 속성값을 규칙적으로 정의
선택자 의미 
 [A]  A 속성이 포함된 엘리먼트 선택
 [A=V]  A 속성 값이 V와 정확히 일치하는 엘리먼트 선택
 [A~=V]  A 속성 값이 V단어(word)를 포함하는 엘리먼트 선택
 [A^=V]  A 속성 값이 V로 시작하는 엘리먼트 선택
 [A*=V]  A 속성 값이 V를 포함하는 엘리먼트 선택
 [A$=V]  A 속성 값이 V로 끝나는 엘리먼트 선택
 [A|=V]  A 속성 값이 정확히 V이거나, V-으로 시작하는 엘리먼트 선택

예제

더보기

결과

 

반응형
저작자표시

'웹 > CSS' 카테고리의 다른 글

[웹/Web] CSS 기본 (1) - CSS 작성 규칙/ 외부 스타일 시트/ 내부 스타일 시트/ 인라인 스타일  (0) 2021.03.03
'웹/CSS' Related Articles more
Comments