[CSS] CSS에서 자주 쓰이는 선택자

처음에는 CSS에서 도대체 어떻게 자식을 선택해야 할지 잘 모르겠어서 고민을 많이 했습니다.

분명 많이 했던 것들인데, 막상 헷갈리니까 검색하게 되더라구요..

내가 생각보다 CSS 선택자에 대해 많이 모르고 있구나 생각이 되어서 자주 사용하는 것들에 대해 정리를 하게 되었습니다.

 

이거.. 적용하려고 고민했다..

 

적용 전과 적용 후..!! 간격이 생기니 훨씬 보기 편해진 디자인!!

 

목차

---

0. 하위 선택자

CSS에서 자식 선택자는 계층구조에서 바로 아래 오는 자식요소만을 선택하기 위해 사용합니다.

그리고 자손 선택자는 계층구조에서 자신 아래 위치한 모든 자식요소들을 선택하기 위해 사용하죠.

 

여러 방법이 있지만, 흔히 자신의 계층구조 바로 아래 오는 자식요소만을 선택하기 위해서는 ">" 를 사용하고, 하위에 오는 모든 자손을 선택하기 위해서는 " "(공백)을 사용합니다.

 

/* 자식 선택자 */
ul.my-things > li {
  margin: 2em;
}

/* 자손 선택자 */
ul.my-things li {
  margin: 2em;
}

 

TMI지만, 여러 요소를 다중으로 선택하기 위해서는 ","를 이용해서 연결해주면 각각의 항목을 or로 처리하게 됩니다.

 

/* 다중 선택자 */
h1, .special {
  color: blue;
}

 

---

1. 가상 클래스

:link, :visited는 각각 방문하지 않은 링크와 한 번 이상 방문한 링크에 적용됩니다.

보통 처음에는 파란색이다가 한 번 이상 방문하면 갈색으로 변하게 되는데, 이것들을 바꾸기 위해서 사용됩니다.

/* 링크 선택자 */
a:link {
  color: red;
}

a:visited {
  color: blue;
}

 

:hover, :active는 각각 마우스 포인터를 올려놓았을 때와 활성화 되었을 때를 나타냅니다.

/* 마우스 포인터 선택자 */
a:hover {
  color: red;
}

a:active {
  color: blue;
}

 

:focus는 tap으로 초점을 이동했을 때, 혹은 input태그같은 곳에 커서가 위치했을 때 동작하게 됩니다.

/* 초점 선택자 */
a:focus {
  color: red;
}

 

:enabled, :disabled, :checked는 각각 입력할 수 있을 때, 입력할 수 없을 때, 체크가 되어있을 때 사용합니다.

:checked는 radio button이나 checkbox, option 등에 사용할 수 있겠죠?!

input:enabled {
  color: blue;
}

input:disabled {
  background: #ccc;
}

:checked {
  margin-left: 25px;
  border: 1px solid blue;
}

 

:first-child, last-child는 첫 번째 자식 요소와 마지막 자식 요소에 적용되는 스타일이 있을 때 사용합니다.

p:first-child {
  color: lime;
}

p:last-child {
  color: lime;
}

 

:first-of-type, :last-of-type은 위에서 설명한 :first-child, :last-child와 유사하게 자식 요소중에 첫 번째 혹은 마지막을 선택하는 가상클래스입니다.

하지만 특정 타입만을 카운트한다는 차이점이 있습니다.

div p:first-of-type {
  color: blue;
}

div p:last-of-type {
  color: blue;
}

 

 

:nth-child(n), :nth-last-child(n)은 자식 요소가 여러 개 있는 경우 사용합니다.

:nth-child(n)는 앞에서부터 n번째 자식 요소에 스타일을 적용하고, :nth-last-child(n)은 끝에서부터 n번째 자식 요소에 스타일을 적용합니다.

특이하게도 2n, 4n+1처럼 배수로 적용할 수도 있습니다.

li:nth-child(2) {
  color: lime;
}

/* 배수 적용 */
:nth-child(4n+1) {
  color: lime;
}

:nth-last-child(4n) {
  color: lime;
}

 

:not()은 특정 요소를 제외하고 적용하고 싶은 스타일이 있을 때 사용합니다.

& :not(:first-of-type) {
  margin-left: 1rem;
}

 

---

2. 참고자료

CSS 선택자 - Web 개발 학습하기 | MDN