CSS 선택자와 우선순위

CSS 선택자와 우선순위

1. 선택자
   1. 모든 태그를 선택하는 선택자

* {
  //css
}

1. Tag 선택자
   1. 주어진 이름의 태그를 선택하는 선택자

body{
  //css
}

header {
  //css
}

1. class 선택자
   1. 주어진 이름의 클래스를 선택하는 선택자. .을 붙여서 클래스임을 구분지어줌

.container{
  //css
}

1. id 선택자
   1. 주어진 이름의 아이디를 선택하는 선택자. #을 붙여 아이디임을 구분지어줌

#container{
  //css
}

1. 속성 선택자
   1. 태그에 붙은 속성도 선택자로 사용이 가능함

<a href="http://www.google.com">google</a>
<input type="password">
a[href="https://www.google.com"] {
/*href 속성값이 https://www.google.com 인 a 태그*/
}
input[type="password"] {
/*input*/
}

a[href] {
/*href 속성을 지닌 모든 a 태그*/
}
a[href*="https://"] {
/*href 속성값이 https://로 시작하는 a 태그*/
}
img[src$=".png"] {
/*src 속성값이 .png로 끝나는 img 태그*/
}

1. 의사 클래스(pseudo class) 선택자
   1. 가상클래스입니다.
   2. 특정 조건에서 마치 그 class가 붙어있는 것처럼 사용하는 선택자 입니다. 쓸 수 있는 의사 클래스가 정해져있고 :를 붙여 사용합니다.

a:link {
    /*방문하지 않은 a 태그*/
}
a:visited {
    /*방문한 a 태그*/
}
div:hover {
    /*커서가 올라가 있는 div 요소*/
}
input:focus {
    /*포커싱 되어있는 input 태그*/
}
button:active {
    /*활성화한 button 태그*/
}
form:focus-within {
    /*form 태그 내부에 focus된 요소가 있으면 선택자가 적용됩니다.*/
    background-color:red;
}

1. 구조 선택자
   1. DOM tree 구조상 요소가 어디에 위치했는지에 따라 적용되는 선택자 입니다.

:root {
    /*DOM tree의 root 요소를 가리킵니다. HTML이면 html 태그를 가리킵니다. */
    /*보통 전역 CSS 변수를 저장할때 사용되는데 이건 다른 글에서 다루겠습니다.*/
}
:empty {
    /*요소 중 자식이 없는 요소를 가리킵니다.(안에 아무 요소도 없음) */
}

:nth-child() {
    /*()안에 들어있는 수식을 기반으로 요소를 선택합니다. */
    /*예를 들어 p:nth-child(2) 라면 2번째 자식인 p를 선택합니다. */
    /*n을 이용한 간단한 수식을 사용할 수 있습니다.*/
    /*p:nth-child(3n+2) 라면 3n+2번째 자식인 p를 선택합니다.(2,5,8...) */
    /*:nth-child(odd),:nth-child(even) 같은 특수 수식도 이용 가능한데, odd는 홀수, even은 짝수 요소를 선택합니다.*/
}

:nth-last-child() {
    /*nth-child랑 같은데 뒤에서부터 샙니다.*/
    /*예를 들어 p:nth-last-child(2) 라면 끝에서 2번째 자식인 p를 선택합니다. */
}

:first-child {
    /*첫번째 자식인 요소를 선택합니다. :nth-child(1)과 같습니다.*/
}

:last-child {
    /*마지막째 자식인 요소를 선택합니다. :nth-last-child(1)과 같습니다.*/
}

:only-child {
    /*sibling이 없는 요소를 선택합니다.*/
}

:nth-of-type() {
    /*:nth-child처럼 ()안에 선택자를 집어넣어서 씁니다.*/
    /*nth-child와 달리 특정 태그에 대해서 count를 진행합니다.*/
    /*말이 어렵네요 아래에 차이점을 기술하겠습니다.*/
}

:nth-last-of-type() { /*nth-last-child의 nth-of-type버전*/}

:first-of-type() { /*first-child의 nth-of-type버전*/}

:last-of-type { /*last-child의 nth-of-type버전*/}

:only-of-type { /*only-child의 nth-of-type버전*/}

!https://pf-emoji-service--cdn.us-east-1.prod.public.atl-paas.net/atlassian/warning_64.png

nth-child

와

nth-of-type

의 차이점

예시

<div class="parent">
    <p>p1</p>
    <span>span1</span>
    <p>p2</p>
    <p>p3</p>
    <span>span2</span>
</div>

p:nth-child(3) {
  color:red;
}
p:nth-of-type(3) {
  color:blue;
}

위와 같이 html과 css가 있다면 :nth-child(3)는 p2를 선택하고

:nth-of-type(3)는 p3를 선택합니다.

nth-child는 sibling중 type이 다른 요소들도 counting에 포함합니다. 3번째 자식인 p는 p2입니다. 만약 p:nth-child(2)이었다면 아무 요소도 선택되지 않았을 겁니다.

반면에 nth-of-type은 sibling중 다른 요소는 counting에서 배제합니다. 즉 <span>이 count되지 않기 때문에 p:nth-of-type(3)은 p3, p:nth-of-type(2)은 p2 입니다.

1. 부정 선택자
   1. :not()으로 사용하는 부정 선택자는 ~가 아닌 요소를 선택합니다. 괄호안에는 css 선택자가 들어갈 수 있습니다.

h1:not(.title) {
    /*h1태그 중 .title 클래스가 붙지 않은 태그를 선택합니다.*/
}

1. ::after
   1. :after로 사용하는 것도 가능합니다. 둘다 맞는 문법입니다.

p::after {
    content: "abcde";
    color:green;
}

p 요소 바로 오른쪽에 가상의 요소가 생깁니다. content내용이 적힌 요소가 생성되는데 content를 써주지 않으면 css가 작동하지 않습니다. 필수임.

1. ::before
   1. :before로 사용하는 것도 가능합니다.

p::before {
    content: "hello world!!";
    color:blue;
}

::after와 같은 가상 요소 이지만 부모 요소의 왼쪽에 생깁니다.

보통 content:"";로 비어있는 div처럼 사용합니다.

1. ::selection
   1. 드래그한 영역 가상요소

::selection {
    background-color:black;
    color:white;
}