CSS - 가상클래스 + 요소 선택자

📌 목록

• Introudction
• Hover
• Active
• Focus
• First child
• Last child
• nth child
• nth of type
• not
• before
• after
• 속성 선택자
• 상속
• 우선 순위
• Conclusion

📌 Introduction

안녕하세요. 오늘은 css에서의 가상클래스 선택자에 대해서 알아보겠습니다. :로 표시하게 됩니다. ::랑 헷갈리지 마세요!

📌 Hover

마우스 포인터가 올라가 있는 동안에만 선택이 됩니다.

<style>
  .my-btn:hover {
    color: red;
  }
</style
<button class="my-btn">HELLO</button>

📌 Active

마우스로 클릭하는 동안에만 선택이 됩니다.

<style>
  .my-btn:active {
    color: blue;
  }
</style>
<button class="my-btn">HELLO</button>

📌 Focus

포커스 된 동안에만 선택이 됩니다.

<style>
  .my-btn:focus {
    background: teal;
  }
</style>
<button class="my-btn">HELLO</button>

📌 First child

요소가 형제 요소 중 첫번째 요소라면 선택

<style>
   li:first-child {
    color: red;
  }
</style>

<ul>
  <li>pear</li> <!-- 선택  -->
  <li>lemon</li>
  <li>orange</li>
</ul>

📌 Last child

요소가 형제 요소 중 가장 마지막 요소 선택

<style>
 li:last-child {
    color: orange;
  }
</style>

<ul>
  <li>pear</li> 
  <li>lemon</li>
  <li>orange</li> <!-- 선택  -->
</ul>

📌 nth child

형제 요소 중 n 번째 요소라면 선택 (0부터 시작합니다.)

<style>
li:nth-child(2) {
    color: blue;
  }
</style>

<ul>
  <li>pear</li> <!-- 0  -->
  <li>lemon</li> <!-- 선택  -->
  <li>orange</li> <!-- 2  -->
</ul>

이렇게도 사용이 가능합니다.

<style>
 li:nth-child(2n) {
    color: blue;
  }
</style>

<ul>
  <li>pear</li> 
  <li>lemon</li> <!-- 선택  -->
  <li>orange</li>
  <li>mango</li> <!-- 선택  -->
</ul>

<style>
.fruits li:nth-child(1) {
    color: yellow;
  }
</style>

<ul class="fruits">
  <div>pear</div> 
  <li>lemon</li>
  <li>orange</li>
  <li>mango</li>
</ul>

위에 부분은 실제로 아무것도 택해지지 않습니다. nth-child(1)은 div인 pear를 선택하게 되는데 그게 li가 아니기 때문에 아무것도 선택이 되어지지 않습니다.

📌 nth of type

E의 타입과 동일한 타입인 형제 요소 중 E가 n번째 요소라면 선택

E:nth-of-type(n)

<style>
.fruits li:nth-of-type(1) {
    color: red;
  }
</style>

<ul class="fruits">
  <div>pear</div> 
  <li>lemon</li> <!-- 선택  -->
  <li>orange</li>
  <li>mango</li>
</ul>

📌 before

해당 요소 내부의 앞에 내용을 삽입하는 기능입니다.

<style>
ul li::before{
    content: "fruit";
    font-size: large;
    color: red;
  }
</style>

<ul class="fruits">
  <li>{fruit}pear</li> 
  <li>{fruit}lemon</li> 
  <li>{fruit}orange</li>
  <li>{fruit}mango</li>
</ul>

위와 같이 fruit가 들어가게 됩니다. (빨간색) 이때 content가 항상 있어야함을 명심해야 합니다.

📌 after

해당 요소 내부의 뒤에 내용을 삽입 하는 기능입니다.

<style>
ul li::after {
    content: "END";
    color: blue;
  }
</style>

<ul class="fruits">
  <li>pear{END}</li> 
  <li>lemon{END}</li> 
  <li>orange{END}</li>
  <li>mango{END}</li>
</ul>

📌 속성 선택자

속성은 이렇게 선택이 가능합니다.

<style>
  [disabled] {
    opacity: 0.9;
    color: red;
  }
  [type="password"] {
    opacity: 0.1;
  }
</style>

<input type="password" value="1234">
<input type="text" value="eddie" disabled>

비슷하게 ^= 이렇게 생긴 녀석이 있는데 이것은 속성 attr을 포함하며 속성 값이 value로 시작하는 요소를 선택하게 됩니다.

<style>
  [class^="btn-"] {
    font-weight: bold;
    border-radius: 20px;
  }
</style>

<button class="btn-success">Success</button> <!-- 선택 -->
<button class="btn-danger">Danger</button> <!-- 선택  -->
<button>Normal</button>

이제 시작하는 요소였지만 끝나는 요소를 선택 할 수도 있습니다.

$=를 사용하면 됩니다.

<style>
  [class$="success"] {
    color: blue;
  }
</style>

<button class="btn-success">Success</button> <!-- 선택 -->
<button class="btn-danger">Danger</button>
<button>Normal</button>

📌 우선순위

위의 선택자의 우선순위 입니다.

1. important
2. 인라인 스타일
3. 아이디
4. 클래스
5. 전체 선택자
6. 상속

📌 Conclusion

이렇게 돔을 어떻게 선택하느냐에 따라서 많은 선택자들이 있었네요.