CSS_복합선택자

▶CSS 선택자란?

선택을 해주는 요소로서 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 된다. 

 

▶복합선택자

▷일치선택자

선택자 2개를 붙혀서 사용하며 선택자 A와 B를 동시에 만족시킨다.

 

 

*HTML

<span class="orange"></span>

 

*CSS

span.orange

 

=> 태그가 span이면서 orange라는 클래스를 가지고 있는 요소이다. 

▷자식선택자

선택자의 자식요소를 선택한다.

 

*HTML

<ul>
    <li class="orange">오렌지</li>
</ul>

 

*CSS

ul > .orange{}

 

=> class가 오렌지인 요소를 찾는데 조건은 ul 태그인 자식을 찾는다 

 

▷하위(후손)선택자

선택자의 하위요소를 선택하며 띄어쓰기가 선택자의 기호이다.

 

*HTML

<div>
  <ul>
      <li class = "orange">오렌지</li>
      <li> 딸기 </li>
  </ul>
</div>
<div> 사과 </div>
<span class ="orange">오렌지</span>

 

*CSS

div .orange{}

 

=>div의 후손인 모든 orange 클래스를 찾는 것이다. 그래서 여기서 선택된건 li 소속 orange, span 소속 orange 총 2개이다.

 

 

▷인접형제선택자

같은 부모를 공유하는 요소들로서 선택자의 다음 형제 요소의 하나를 선택한다.

 

*HTML

<ul>
   <li>망고</li>
   <li>수박</li>
   <li class = "orange">오렌지</li>
   <li>사과</li>
   <li>딸기</li>
</ul>

 

*CSS

.orange + li{}

 

=> li 태그 중 형제요소 중 하나를 택하는데 그 조건은 class의 유무이며 class를 가지고 있는 요소 중 orange라는 요소를 선택한다. 즉, orange인 오렌지의 다음! 사과를 의미하는 코드가 되는 것이다. 

 

 

▷일반 형제 선택자

선택자 다음 형제요소를 모두 선택한다.

 

*HTML

<ul>
   <li>망고</li>
   <li>수박</li>
   <li class = "orange">오렌지</li>
   <li>사과</li>
   <li>딸기</li>
</ul>

 

*CSS

.orange ~ li{}

 

=> orange 클래스의 다음 형제들 즉, 사과와 딸기가 선택된다.

 

 

▶가상클래스 선택자

▷hover

선택자 요소에 마우스 커서가 올라가있는 동안 ~ 보이게 하여라

 

a:hover{
    color : red;
}

 

=> a태그에 마우스를 올리면 red color가 나오게 하여라

 

▷active

선택자 요소에 마우스를 클릭하고 있는 동안 ~ 보이게 하여라

 

a:active{
   color : red;
}

 

=> a태그에 마우스를 클릭하고 있는 동안 red color가 나오게 하라 

 

▷focus

선택자 요소가 포커스가 되고있는 동안 ~보이게하라 

 

input:focus{
   background-color : red;
}

 

input 요소에 데이터 입력을 받을 동안 뒷 배경을 red로 보이게하라 

 

***Focus가 될 수 있는 요소는 HTML 대화형 콘텐츠(사용자의 데이터를 입력 받는 요소들:INPUT, A, BUTTON, LABEL, SELECT )에 해당한다. 단, HTML 대화형 콘텐츠 요소가 아니더라도 tabindex 속성을 사용하면 focus를 넣을 수 있는데 <div class = "box" tabindex = "-1"></div> 이런식으로 사용한다.

 

▷first-child

선택자의 형제요소 중 첫째를 선택한다.

 

*HTML

<div class="color">
   <span>초록</span>
   <span>노랑</span>
   <div>검정</div>
   <p>핑크</p>
   <h3>보라</h3>

 

*CSS

.color span:first-child{
    color: red;
}

 

=> 1. span 태그 안에 위치 / 2. color의 하위요소 / 3. 형제 중 첫번째 라는 조건을 모두 충족시켜야하며 이 3가지를 모두 만족한 경우에 "초록"이 빨간색으로 변경된다.

 

▷last-child

선택자의 형제요소 중 막내를 선택한다.

 

*HTML

<div class="color">
   <span>초록</span>
   <span>노랑</span>
   <div>검정</div>
   <p>핑크</p>
   <h3>보라</h3>

 

*CSS

.color h3:last-child{
    color: red;
}

 

=> 1. h3 태그 안에 위치 / 2. color의 하위요소 / 3. 형제 중 마지막이라는 조건을 모두 충족시켜야하며 이 3가지를 모두 만족한 경우에 "보라"가 빨간색으로 변경된다.

 

▷last-child(n)

선택자의 형제요소 중 n번째를 선택한다.

 

*HTML

<div class="color">
   <span>초록</span>
   <span>노랑</span>
   <div>검정</div>
   <p>핑크</p>
   <h3>보라</h3>

 

*CSS

.color *:nth-child(3){
    color: red;
}

 

=> 1. *(전체요소) 중 / 2. color의 하위요소 / 3. 형제 중 (3)번째 라는 조건을 모두 충족시켜야하며 이 3가지를 모두 만족한 경우에 "핑크"가 빨간색으로 변경된다.(0부터시작).

 

***2n

2 * 0 = 0
2 * 1 = 2
2 * 2 = 4
2 * 3 = 6
2 * 4 = 8

 

2n을 입력하게되면 위의 box와 같이 계산이 된다. 그러나 우리가 계속 가져온 예제는 총 5개. 그래서 2,4번째인 "검정","보라"가 출력이 된다. 만약 홀수 출력을 원한다면 N+1, 첫번째 요소를 제외하고 두번째 요소부터 시작을 원한다면 N+2로 조절해준다.

 

▷not(XYZ)

선택자 XYZ가 아닌 ABC를 선택

 

*HTML

<div class="color">
   <span>초록</span>
   <span>노랑</span>
   <div>검정</div>
   <p>핑크</p>
   <h3>보라</h3>

 

*CSS

.color *:not(span){
    color: red;
}

 

=> 1. span을 제외한 모든 태그 / 2. color의 후손 을 충족시키는 "검정","핑크","보라"가 빨간색으로 변경된다.