[2019.10.03] 오늘의 TIL - 같은 class의 특정 태그에만 Style을 다르게 적용시키기

똑같은 Element에 똑같은 Style을 적용시키기 위해 아래와 같이 코드를 작성한다.

.item {
  width: 100%;
  height: 100%;
  border: 1px solid black; 
}

<div className='item'>
첫번째
</div>
<div className='item'>
두번째
</div>
<div className='item'>
세번째
</div>

 

위 코드는 세개의 div 태그에 똑같은 item의 style이 적용된다.

 

그러나 특정 div 태그에만 border 색을 다르게 하고 싶다면?

 

해결책은 다음과 같다.

 

# 첫 번째 div 태그에만 border색을 다르게 적용 시키는 법

.item {
  width: 100%;
  height: 100%;
  border: 1px solid black; 
}
.item: first-child {
  border: 1px solid yellow; 
}

 

# 첫 번째 div 태그에만 border색을 다르게 적용 시키는 법

.item {
  width: 100%;
  height: 100%;
  border: 1px solid black; 
}
.item: last-child {
  border: 1px solid yellow; 
}

 

# n 번째 div 태그에만 border 색을 다르게 적용 시키는 법

.item {
  width: 100%;
  height: 100%;
  border: 1px solid black; 
}
.item: nth-child(2) {
  border: 1px solid yellow; 
}

 

이렇게 하면 같은 item이라는 클래스 네임을 가진 element 중 제일 특정 element만 다른 border 색을 가지게 된다.

 

---

 

오랜만에 쓰는 TIL~! 신난다!

요즘에는 UI 작업을 진행 중이다 보니 CSS와의 사투를 벌이고 있는데, 내가 몰랐던 CSS skill을 하나 알게 되었다.

모르는 것을 알게되어 신나는 기분으로 TIL 작성~!