(TIL Day27)CSS- 선택자

연결 선택자

 

하위 선택자

• 부모 요소에 포함된 하위 요소 모두에 스타일이 적용된다.
• 자식 요소 뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다.

div p {
  color: red; 
}

 

 

자식 선택자

• 하위 요소 전체에 스타일을 적용하지 않고, 자식 요소에만 스타일이 적용된다.
• '>'를 사용

div > p {
  color: red; 
}

/* div의 자식 요소 p에만 색이 red로 적용된다. */

 

 

인접 형제 선택자

• 형제 요소 중 가장 가까운 태그의 첫번째 요소에 스타일을 적용한다.
• '+'를 사용

div + p {
  color: red; 
}

/* div 태그의 형제 요소 p 중 첫번째 요소에만 적용 */

 

형제 선택자

• 모든 형제 요소들에 스타일을 적용한다.
• '~'를 사용

div ~ p {
  color: red; 
}

/* div 태그의 형제 요소 중 모든 p 태그에 스타일 적용 */

---

 

속성 선택자

 

[속성] 선택자

• 지정한 속성을 가진 태그에 스타일을 적용한다.
• '[]'를 사용

a[href] {
  background-color: blue;
}

/* a 태그 중 'href' 속성을 가진 태그에만 스타일을 적용 */
/* <a>홈페이지</a> => 이 태그는 href 속성이 없기 때문에 적용되지 않는다. */

 

 

[속성=값] 선택자

• [속성] 중 특정한 값을 가지는 태그에 스타일을 적용한다.
• '[속성=값]'으로 사용

div[class="container"] {
  color: red; 
}

/* div 태그 중 class가 "container"인 태그에만 스타일을 적용한다. */

 

 

[속성~=값] 선택자

• [속성=값] 선택자는 속성의 값과 정확히 일치하는 태그만 스타일이 적용된다.
• [속성~=값] 선택자는 여러 값 중 특정 값이 포함되어 있으면 스타일이 적용된다.

div[class~="container"] {
  color: red; 
}

/* div 태그의 class 속성 중 "container"가 포함된 모든 div 태그에 스타일이 적용된다. */
/* 값은 일부가 아닌 단어가 일치해야 적용되며, class 속성 중 
   _container, button_container 등과 같은 값을 가지는 
   div 태그에는 적용이 되지 않는다. */

 

[속성|=값] 선택자

• 특정 값이 포함된 속성에 스타일이 적용된다.
• [속성~=값] 선택자는 단어와 값이 일치해야 스타일이 적용되지만, [속성|=값] 선택자는 해당 단어가 일치하거나 "값-"과 같이 하이픈(-)으로 연결한 단어면 스타일이 적용된다.

div[class|="container"] {
  color: red; 
}

/* div 태그의 class 속성 중 "container"가 포함된 모든 div 태그에 스타일이 적용된다. */
/* "container-a", "container-button"등과 같은 태그도 모두 적용된다. */

 

 

[속성^=값] 선택자

• 특정 값으로 시작하는 속성에 스타일이 적용된다.

div[class^="con"] {
  color: red; 
}

/* div 태그의 class 속성 중 "con"으로 시작하는 속성에 스타일이 적용된다. */

 

 

 

[속성$=값] 선택자

• 특정 값으로 끝나는 속성에 스타일이 적용된다.

div[class$="nt"] {
  color: red; 
}

/* div 태그의 class 속성 중 "nt"로 끝나는 모든 div에 스타일 적용 */
/* "element", "ant"등도 적용 */

 

 

[속성*=값] 선택자

• 값의 일부가 일치하는 속성에 스타일이 적용된다.

div[class*="tan"] {
  color: red; 
}

/* div 태그의 class 속성 중 "tan"가 포함된 모든 div 태그에 스타일이 적용된다. */
/* "titan", "tang", "tank"등도 적용된다. */