css selector

• 클래스선택자
  • 주어진 class 특성을 가진 모든 요소를 선택한다
• ID 선택자
  • id 특성에 따라 요소를 선택. 문서 내에는 주어진 ID를 가진 요소가 하나만 존재한다 
• Type Selector

CSS에서 가장 쉽게 볼 수 있는 기본 선택자는 태그 이름을 그대로 사용하는 타입 선택자(Type selector)이다

• Combinators selectors : 복합선택자
  • 자식 : child 차일드 : 직속 하위요소.
  • 부모 : parent : 직속 상위요소.
  • 후손 : 자손, 하위의 모든 요소.
  • 조상 : 상위 모든 요소.
  • 형제 : 같은 부모(직속)을 공유하는 요소.

E.F
일치(Basic combinator) : E, F를 동시에 만족하는 요소.

E>F
자식(Child combinator) : E의 자식요소 F를 선택.
태그 ul의 자식이면서, 클래스를 orange를 가지고 있는 요소만 선택.

E F(띄어쓰기)
후손(자손, 하위)선택자(Descendant combinator) : E의 자손 요소 F를 선택.

E+F
인접형제 선택자(Adjacent Sibling combinator) : E의 다음 형제요소 F하나만 선택.
스스로를 제외한다.
바로 다음의 형제요소가 없다면 아무것도 선택하지 않는다.

E~F
일반형제 선택자(General Sibling combinator) : E의 다음 형제요소 F모두 선택.
상기동일.
다만, 조건에 맞는 형제요소가 여럿일 때, 모두 선택한다.

• Attribute Selector
  • 속성까지 고려해야하는 섬세한 스타일이 필요한 경우에라면 [ ] 기호를 사용하는 속성 선택자(Attribute selector)를 사용한다
  • [ ] 기호 안에 속성명만 명시하면 속성값과 무방하게 해당 속성이 설정된 모든 요소를 선택한다
• input[id_color] { color:red; }
  
  
• Pseudo-classes selectors : 가상 클래스 선택자

E:hover
E에 마우스(포인터)가 올라가 있는 동안에만 적용.
E:active
E를 마우스로 클릭하고있는 동안에
E:focus
E가 포커스 된 동안에.
포커스를 받을 수 있는 대화형 콘텐츠에서 사용 가능
E:first-child
E가 형제 요소 중 첫번째 요소일 경우.
E:last-child
E가 형제 요소 중 마지막 요소일 경우.
E:nth-child(n)
E가 형제 요소 중 n번째 요소라면 선택.
E:nth-of-type(n)
E와 동일한 타입(태그)인 형제 요소 중 E가 n번째 요소라면 선택.
E:not(S)
부정 선택자(Negation Selector) : S가 아닌 E 선택.
선택할 Element 중에서 특정 조건만 걸러낼때 사용

 

 

패턴	해석
*	모든 요소 선택
#id	ID값으로 지정된 요소를 선택
.class	Class값으로 지정된 요소를 선택
E	Element 요소 선택
E:link	방문하지 않은 Element를 선택
E:visited	방문한 Element를 선택
E:hover	마우스가 Element에 올라가 있는 상태의 Element를 선택
E:active	마우스 클릭 또는 키보드가 눌린 상태의 Element를 선택
E:focus	Focus가 머물러 있는 동안 Element를 선택
E:first-line	Element 요소의 첫번째 라인을 선택
E:first-letter	Element 요소의 첫번째 문자를 선택
E[foo]	'foo' 속성이 포함된 Element를 선택
E[foo="bar"]	'foo'속성의 값이 'bar'와 일치하는 Element를 선택
E[foo~="bar"]	'foo'속성의 값이 'bar'를 포함하는 Element를 선택
E[foo |= "en"]	'foo' 속성의 값이 'en'  또는 'en~'으로 시작되는 Element 선택
E:lang(en)	HTML lang 속성의 값이 'en'로 지정된 Element 선택
E:before	Element 요소 전에 생선된 요소를 선택
E:after	Element 요소 후에 생성된 요소 선택
E>F	Element 요소의 자식인 F 요소 선택
E+F	Element 요소 뒤의 F 요소 선택
E[foo^="bar"]	'foo' 속성의 값이 'bar'로 정확하게 시작하는 요소 선택
E[foo$="bar"]	'foo' 속성의 값이 'bar'로 정확하게 끝나는 요소 선택
E[foo*="bar"]	'foo'속성의 값에 'bar'를 포함하는 요소 선택
E:root	문서의 최상위 루트 요소 선택
E:first-child	첫번째 자식 요소가 Element라면 선택
E:last-child	Element 요소 중 마지막 자식의 Element를 선택
E:nth-child(n)	Element의 N번째 요소
E:nth-last-child(n)	뒤로부터 지정된 순서와 일치하는 요소가 Element라면 선택
E:nth-of-type(n)	Element 요소 중 앞으로 부터 순서가 일치하는 n번째 Element선택
E:nth-last-of-type(n)	Element 요소 중 끝으로부터 순서가 일치하는 n번째 Element 선택
E:first-of-type	Element 요소 중 첫번째 Element 선택
E:last-of-type	Element 요소 중 마지막 Element 선택
E:only-child	Element가 유일한 자식이면 선택
E:only-of-type	Element가 같은 타입이면 선택
E:empty	텍스트 및 공백을 포함하여 빈 자식을 가진 Element를 선택
E:target	Element의 URL의 대상이면 선택
E:enabled	활성화된 폼 컨트롤 Element요소 선택
E:disabled	비활성화된 폼 컨트롤 Element요소를 선택
E:checked	선택된 폼 컨트롤(라디오,체크박스)를 선택
E:not(s)	S가 아닌 E 요소를 선택
E~F	E요소가 앞에 존재하면 F를 선택
a[href*="sample"]	별표는 입력값이 속성값 안 어딘가에 존재한다면 적용ex)sample.com(O), sample.co.kr(O), sample.net(O), sam.com(X)
a[href*=".jpg"]	이미지(.jpg 로 끝나는 url)로 링크가 걸린 앵커를 선택gif와 png는 영향받지 않습니다.