[CSS] 선택자(Selector)

1. AND 선택자

다중 조건을 모두 만족하는 엘리먼트를 선택하는 경우

// 공백 없이 선택자를 붙여서 사용
.class1#id2 {
  color : red;
}

div.className1.className2 {
  color : black;
}

2. OR 선택자

다중 조건 중 1개라도 만족하는 경우

// , 기호로 구분
.class1, id2 {
  color : red;
}

div.className1, .className2 {
  color : black;
}

3. 중첩 선택자 (자손 선택자)

특정 부모요소 안에 있는 특정 자손을 모두 선택하는 경우

/* scss */
.container {
  div {
    .child {
      .name {
        color: red;
      }
      .age {
        color: orange;
      }
    }
  }
}

/* css */
.container div .child .name {
  color : red;
}
.container div .child .age {
  color : red;
}

4. 자식 선택자 (>)

특정 부모 요소 내에 바로 아래있는 특정 자식을 선택하는 경우

/* scss */
.container {
  div {
    > .child {
      .name {
        color: red;
      }
      .age {
        color: orange;
      }
    }
  }
}

/* css */
.container div > .child .name {
  color : red;
}
.container div > .child .age {
  color : red;
}

5. 상위 선택자 (&)

다중 클래스의 선택 또는 많은 선택자를 적는 경우, & 기호가 포함된 자신과 상위요소를 참조하며 상위요소로 치환 됨

/* scss */
div {
  position: absolute;
  &.friend {
    color: red;
  }
}

.anoter-div {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}

/* css */
div {
  position: absolute;	
}

div.friend {
  color: red;
}

.anoter-div li:last-child {
  margin-right: 0;
}

6. 인접 형제 선택자 (+)

앞의 요소 바로 뒤에 있는 요소만 선택, 사이에 다른 요소가 있으면 선택하지 않음

/* scss */
.div {
  position: relative;
  display: inline-block;
  & + & {   /* &는 부모 요소를 의미 */
    margin-left: 8px;
  }
}

/* css */
.div {
  position: relative;
  display: inline-block;
}

.div + .div {
  margin-left: 8px;
}

7. 일반 형제 선택자 (~)

기호의  앞 요소 다음에 뒷 요소가 나올 때 선택되며 뒤에 요소가 먼저 나오는 경우 선택하지 않음

/* scss */
div {
  border: solid 1px black;
  ~ h1 {
    color : red;
  }
} 

/* css */
div {
  border: solid 1px black;
}

div ~ h1 {
  color : red;
}

8. 가상 선택자

:active	a:active	해당 요소를 마우스로 클릭 했을때
:hover	a:hover	마우스 포인터가 해당 요소 좌표에 올라간 경우
:link	a:link	클릭하지 않은 모든 링크
:visited	a:visited	클릭했던 모든 링크
:focus	input:focus	input 태그에서 해당 요소가 포커스를 가진 경우
:checked	input:checked	해당 요소의 체크박스가 체크 되었을 때
:disabled	input:disabled	해당 요소의 상태가 disabled 인 경우, disabled 속성 적용 시
:enabled	input:enabled	해당 요소의 상태가 enabled 인 경우
:first-child	p:first-child	해당 요소의 첫번째 자식 요소를 선택
:last-child	p:last-child	해당 요소의 마지막 자식 요소를 선택
:nth-child(N)	p:nth-child(N)	부모안에 N번째 요소를 선택
:nth-child(Nn)	p:nth-child(Nn)	부모안에 N번째 마다 요소를 선택
:nth-child(Nn+S)	p:nth-child(Nn+S)	부모안에 S번째 요소를 포함하여 S번째 부터 N번째 마다 선택
:nth-child(odd)	p:nth-child(odd)	부모안에 홀수번째 요소를 모두 선택
:nth-child(even)	p:nth-child(even)	부모안에 짝수번째 요소를 모두 선택
:nth-of-type(N)	p:nth-of-type(N)	부모안에 모든 p 요소 중 N번째 요소 선택
:first-of-type	p:first-of-type	부모안에 모든 p 요소 중 첫번째 요소 선택
:last-of-type	p:last-of-type	부모안에 모든 p 요소 중 마지막 요소 선택

 

 

참고사이트
https://dinfree.com/lecture/frontend/122_css_1.html

https://lalacode.tistory.com/6