$$config title: [CSS] CSS 선택자 keywords: - IT - CSS $$ # CSS 선택자 - [css 선택자 연습 사이트 "css diner"](https://flukeout.github.io/) ## 자식 선택, 후손 선택 ```html

``` - .table apple -> 선택 가능(후손 선택) - .table > apple -> 선택 불가능(자식만 선택가능) - .table > plate -> 선택 가능(자식 선택) ## id 선택자 ### #id ```html

``` - #id값 - #fancy ## class 선택자 ### .class ```html

``` - .class값 - .small - plate.small - plate태그 중에서 클래스가 small인 태그 선택 ## 전체 선택자 ### * ```html

``` - plate * - plate 안에 있는 요소 전체 선택 - * - 전체 선택 ## Adjacent Sibling Selector ### A + B ```html

``` - 특정 element 뒤에 바로 따라오는 siblings들을 선택할 수 있는 selector - siblings란 A element 뒤에 바로 따라오는 B element를 A element의 sibling임 - p + .intro - p 뒤에 오는 형제 중 클래스 intro를 가진 요소를 선택한다. ## General Sibling Selector ### A ~ B ```html

``` - A라는 element 이후로 존재하는 sibling 모두를 선택하는 selector - A + B 선택자와 다르게 A 뒤에 오는 하나의 element를 선택하는 것이 아니라, 선언된 종류의 sibling element 모두를 선택함 - "A ~ B" 인데 A를 포함하지 않음 - bento ~ pickle ## Child Selector ### A > B ```html

``` - parents element에 속해 있는 child element를 바로 선택할 수 있는 selector - plate > apple ## First Child Pseudo-selector ### :first-child ```html

``` - parent element에 nesting 되어있는 첫번째 child element를 선택하는 selector - 해당 method가 "A:first-child"의 형식인데, 여기서 A는 직접적으로 우리가 선택하고자는 element가 되는것이지, parents element 아님 - orange:first-child ## Only Child Pseudo-selector ### :only-child ```html

``` - parents element에 nesting 되어 있는 child elements들 중 독자(only child)인 녀석들만 선택할 수 있는 selector - A:only-child 라고 selector를 선언하면 "only child 인 모든 A element를 선택한다"는 뜻 - 만약 A :only-child 와 같이 "A"와 ":" 사이에 space가 있다면 "A라는 parents elements들의 모든 only-child element를 선택한다"는 의미 - plate :only-child ## Last Child Pseudo-selector ### :last-child ```html

``` - parents element에 nesting된 child element 중 마지막 element (last child)를 선택하는 selector - 만약 nesting 되어있는 child element가 하나라면 해당 element는 first-child 이자 only-child 이며 last-child가 됨 - .small:last-child ## Nth Child Pseudo-selector ### :nth-child(A) ```html

``` - n번째에 위치한 element 선택할 수 있는 selector - "A:nth-child(B)" 일때 A라는 element 중 B번째에 있는 element를 선택한다는 뜻 - 만약 A를 선언하지 않는다면 모든 element들 중 B번째를 선택하게 될 것 - :nth-child(3) ## Nth Last Child Selector ### :nth-last-child(A) ```html

``` - :nth-child()와 비슷하지만 카운팅 방향이 위에서 부터가 아니라 아래에서 부터인 nth-last-child() selector - bento:nth-last-child(3) ## First of Type Selector ### :first-of-type ```html

``` - nesting된 element, class, id 중 원하는 type를 선택하는 selector - 그 중 첫번째 자리에 위치한 녀석을 선택하는 selector - apple:first-of-type ## Nth of Type Selector ### :nth-of-type(A) ```html

``` - nth 자리에 위치한 type별로 선택할 수 있는 selector - method는 :nth-of-type(A) 인데 A에는 1, 2, 3 과 같이 순서를 나타내는 integer 외에도 even 혹은 odd 와 같이 패턴을 나타는 argument를 넣는 것도 가능 - plate:nth-of-type(even) - even : 짝수 - odd : 홀수 ## Nth-of-type Selector with Formula ### :nth-of-type(An+B) ```html

``` - 어느 한 element의 위치를 시작으로 n번째 element를 연속적으로 선택할 수 있는 selector - "2n+3"에서 "3"은 selecting을 시작하는 element이고 "2n"는 그 이후로 두번째 element 모두를 연속적으로 선택한다는 의미 - :nth-of-type(2n+3) ## Only of Type Selector ### :only-of-type ```html

``` - parent element내에서 '유일한'type을 selecting하는 selector - plate .small:only-of-type ## Last of Type Selector ### :last-of-type ```html

``` - 한 type내에서 가장 마지막에 위치한 element를 선택하는 selector - 여기서 말하는 type은 tag의 종류라고 생각하면 됨 - 예를 들어 p태그와 span태그는 서로 다른 type이라고 할 수 있음 - .small:last-of-type ## Empty selector ### :empty ```html

``` - child element가 하나도 없는 텅빈 element 모두를 선택할 수 있는 selector - bento:empty ## Negation Pseudo-class ### :not(X) ```html

``` - 해당 selector는 'x'를 제외한 모든 나머지 element를 선택 - 괄호안에 1가지 이상의 type이 존재할때는 ','로 나눠줘야 함 - :not(.small, plate) ## Attribute Selector ### [attribute] ```html

``` - attribute(특성)을 이용한 selector - 해당 문제에서는 element 3개가 'for'라는 특성을 공통적으로 가지고 있으므로, 해당 특성을 선택해 3개 element를 모두 선택 - [for] ### A[attribute] ```html

``` - 어떠한 element type을 특정화하여 그 type내에서 한 특성을 공유하는 element들을 모두 선택할 수 있는 selector - plate[for] ## Attribute Value Selector ### [attribute="value"] ```html

``` - 특성이 가지고 있는 고유의 value를 이용한 selector - [for="Vitaly"] ## Attribute Starts With Selector ### [attribute^="value"] ```html

``` - 앞서 활용한 attribute의 value를 이용한 selector - 앞전과는 다르게 value를 전체를 적용하는 대신 value의 일부분을 이용해 value의 일부를 공통적으로 공유하는 모든 element를 선택 - [for^="Sa"] ## Attribute Ends With Selector ### [attribute$="value"] ```html

``` - attribute value의 앞쪽 일부 대신 뒷쪽의 일부를 가지고 선택할 수 있는 selector - [for$="to"] ## Attribute Wildcard Selector ### [attribute*="value"] ```html

``` - 특정 알파벳을 attribute value로 가지는 모든 element를 선택하는 selector - [for*="bb"]