CSS_Selector 활용하기

CSS Selctor의 활용이 무궁무진하다는 것을 깨달았다. 상황에 맞게 잘 사용할 수 있도록 정리해보자.

Combinators

캣타워에 커서를 올렸을 때 고양이의 스타일을 바꾸고싶다면?

<div class="cat-tower">
  <img class="cat">
</div>

.cat-tower:hover cat {
  border-radius: 5px;
}

• ' '(space)
  캣타워 안 어딘가 고양이가 있는 경우

<section class="house">
  <div class="cat-tower"></div>
  <img class="cat">
  <img class="unselected-cat">
</section>

.cat-tower:hover + cat {
  border-radius: 5px;
}

• '+'
  고양이가 같은 부모 안에서 캣타워 바로 뒤에 있는 경우

<section class="house">
  <div class="cat-tower"></div>
  <img class="cat">
  <img class="dog">
  <img class="cat">
</section>

.cat-tower:hover + cat {
  border-radius: 5px;
}

• '~'
  고양이가 같은 부모 안에서 캣타워를 뒤따르는 경우 (뒤따르는 모든 고양이가 선택된다.)

<div class="cat-tower">
  <img class="cat">
  <div class="unselected-cat">
    <img class="cat">
  <div>
</div>

.cat-tower:hover + cat {
  border-radius: 5px;
}

• '>'
  고양이가 캣타워의 바로 아래 자식인 경우

Pseudo classes

to-do list에서 할 일이 하나 뿐인 날만 스타일링을 다르게 하고싶다면?

<ul class="mon-to-do">
  <li>고양이 밥주기</li>
</ul>
<ul class="tue-to-do">
  <li>고양이 밥주기</li>
  <li>고양이랑 놀기</li>
</ul>
<ul class="wed-to-do">
  <li>고양이 사진 찍기</li>
  <li>고양이랑 놀기</li>
  <li>고양이 병원 데려가기</li>
</ul>
<ul class="thu-to-do">
  <li>공부하기</li>
</ul>

li:only-child {
  color: red;
}
li {
  color: blue;
}

• :only-child
  형제요소가 없는 자식요소가 선택된다. 'mon-to-do'와 'thu-to-do'만 red 스타일이 적용될 것이다.
  :first-child:last-child와 :first-child:nth-last-child(1), :nth-child(1):nth-last-child(1) 와 결국엔 같은 것을 가리키지만 훨씬 알아보기 쉽다.

to-do list 목록 사이에 라인을 넣어주고, 마지막 요소만 라인을 제거하고 싶다면?

<ul class="mon-to-do">
  <li>고양이 밥주기</li>
</ul>
<ul class="tue-to-do">
  <li>고양이 밥주기</li>
  <li>고양이랑 놀기</li>
</ul>
<ul class="wed-to-do">
  <li>고양이 사진 찍기</li>
  <li>고양이랑 놀기</li>
  <li>고양이 병원 데려가기</li>
</ul>
<ul class="thu-to-do">
  <li>공부하기</li>
</ul>

li:not(:last-child) {
  border-bottom: 1px solid blue;
}

• :not()
  괄호 안에 들어오는 요소만 스타일링이 적용되지 않는다.

Attribute Selector

새 탭으로 열리는 링크태그만 다른 색상으로 스타일링하고 싶다면?

<ul class="cat-info">
  <li><a>instagram</a></li>
  <li><a>linkedin</a></li>
  <li><a target="_blank">github</a></li>
</ul>

a[target="_blank"] {
  color: red;
}
a:not([target="_blank"]) {
  color: blue;
}

• [attr=value] 해당 attribute의 값이 value와 일치하는 요소에 스타일링이 적용된다.
  다양한 attrubute selector의 서로 다른 점을 알고싶다면 아래 링크 참고하기!
  https://www.w3.org/TR/selectors/#attribute-selectors

• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
• https://www.w3.org/TR/selectors
• CSS Secrets by: Lea Verou