[CSS] Selector

1. Id와 Class

 

class	id
.으로 선택	#으로 선택
목적에 맞게 자유롭게 이름 붙일 수 있음	목적에 맞게 자유롭게 이름 붙일 수 있음
동일한 값을 갖는 엘리먼트 많음	문서 내에서 단 하나의 엘리먼트가 유일한 값을 가짐
엘리먼트가 여러 값을 가질 수 있음	엘리먼트 단 하나의 값을 가짐
스타일의 분류(classification)에 사용	특정 엘리먼트를 이름 붙이는 데 사용

 

2. 전체 선택자 : *

 

모든 형태의 모든 요소를 선택합니다

• ns|* : 네임스페이스 ns 안의 모든 요소 선택
• *|* : 모든 요소 선택
• |* : 네임스페이스 없는 모든 요소 선택

 

3. 연결 선택자

 

• 하위 선택자 : section p { color: blue; }
  section - 상위요소, p - 하위요소
  
  부모 요소에 포함된 하위 요소 모두에 스타일이 적용되는 것으로 '자손 선택자'라고도 합니다
  자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용됩니다
  
  
• 자식 선택자 : section > p { color: blue; }
  section - 상위요소, p - 하위요소
  
  두 요소 사이에 '>'를 표시해 부모 요소와 자식 요소를 구분합니다
  바로 아래 요소인 자식 요소에만 스타일이 적용됩니다
  
  
• 인접 형제 선택자 : h1 + p { text-decoration: underline; }
  p - <h1> 태그의 첫 번째 형제 요소
  
  같은 부모 요소를 가지는 요소들을 형제 요소라고 하고 먼저 나오는 요소를 '형 요소', 나중에 오는 요소를 '동생 요소'라고 합니다
  인접 형제 선택자는 문서 구조상 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일이 적용됩니다
  
  
• 형제 선택자 : h1 ~ p { text-decoration: underline; }
  p - 형제 요소
  
  인접 형제 선택자와 달리 모든 형제 요소에 적용됩니다

 

4. 속성 선택자

 

기본형	스타일 적용 경우	예시 -선택자	예시 - 적용되는 요소
[속성]	지정한 '속성'일 때	[href]	<a href="#">메뉴 1</a>
[속성 = 값]	'값'에 일치할 때	[target = "_blank"]	<a href="#" target="_blank">HTML</a>
[속성 ~= 값]	여러 값들 중 특정 '값'이 포함되어 있을 때(단어별)	[class ~= "button"]	<a href="#" class="flat button">메뉴 4</a>
[속성 |= 값]	'값'이 포함되어 있을 때 (하이픈 포함 단어별)	[class |= "us"]	<a href="#" title="us">영어</a> <a href="#" title="us-english">영어</a>
[속성 ^= 값]	'값'으로 시작할 때	[title ^= "eng"]	<a href="#" title="english"> 영어</a>
[속성 $= 값]	'값'으로 끝날 때	[href $= "xls"]	<a href="intro.xls">엑셀 파일 </a>
[속성 *= 값]	'값'이 속성 값의 일부일 때	[href *= "w3"]	<a href="http://www.w3c.org/TR/html">HTML 사이트</a>

 

 

5. 가상클래스

 

1. :link 가상 클래스 선택자 - 방문하지 않은 링크에 스타일 적용
2. :visited 가상 클래스 선택자 - 방문한 링크에 스타일 적용
3. :hover 가상 클래스 선택자 - 웹 요소에 마우스 커서를 올려놓을 때 스타일 적용
4. :active 가상 클래스 선택자 - 웹 요소를 활성화했을 때 스타일 적용
   링크나 이미지 등 웹 요소를 활성화했을 때(누르고 있을 때)
5. :focus 가상 클래스 선택자 - 웹 요소에 초점이 맞추어졌을 때 스타일 적용
   웹 요소에 초점이 맞추어졌을때(텍스트 안에 마우스 커서를 놓거나 [Tab]을 눌러 초점을 이동했을 때

가상 선택자를 링크와 관련해 사용할 때는 선택자 순서에 주의해야 합니다. ①~④ 네 가지를 모두 정의한다면 :link 선택자부터 정의하고 :visited, :hover, :active 순서대로 정의합니다. 이 순서가 바뀌면 스타일을 적용해도 제대로 적용되지 않습니다.

 

 

6. :nth-child(n)와 :nth-last-child(n) 가상 클래스 선택자

 

class나 id를 사용하지 않고 지정할 항목이 몇 번째에 있는지를 따져 스타일을 적용할 수 있습니다

• :nth-child(n)는 앞에서부터 n번째 자식 요소에 스타일을 적용
• :nth-last-child(n)는 끝에서부터 n번째인 자식 요소에 스타일 적용
• div 요소 안에서 홀수 번째로 나타나는 자식 요소인 p 요소에 스타일 적용
  div p:nth-child(odd), div p:pnt-child(2n+1)
• div 요소 안에서 짝수 번째로 나타나는 자식 요소인 p 요소에 스타일 적용
  div p:nth-child(even), div p:nth-child(2n+0), div p:nth-child(2n)

 

7. CSS Selector

 

• #label.center {...}
  id가 label이면서 동시에 class가 center인 엘리먼트를 선택
• #label .center {...}
  id가 label이고 자식 class가 center인 엘리먼트 모두 선택

    구조 가상 클래스 셀랙터

• p:first-of-type
  p 엘리먼트 중에 p로 시작하는 첫번째 엘리먼트 선택
• div:last-of-type
  div 엘리먼트 중에 div의 마지막 엘리먼트 선택

    부정 샐렉터

• p:not(#only) {...}
  p 엘리먼트 중에서, id가 only인 엘리먼트를 제외하고 모두 선택
• div:not(:nth-of-type(2)) {...}
  div 엘리먼트의 형제 엘리먼트 중 두번째 div 엘리먼트를 제외한 모든 div 엘리먼트 선택