CSS (Cascading Style Sheets) 선택자

CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 데 사용됩니다.

 

1, .sidebar .tab-list .mysla
2, .sidebar.tab-list.mysla
3, .sidebar, .tab-list, .mysla
4, .sidebar > .tab-list > .mysla

 

1. .sidebar .tab-list .mysla
   • 이 선택자는 HTML 문서 내에서 다음과 같은 구조를 가진 요소를 선택합니다: .sidebar 클래스를 가진 요소 내부의 .tab-list 클래스를 가진 요소 내부의 .mysla 클래스를 가진 요소.
   • 이 선택자는 중첩된 요소를 선택하는 데 사용됩니다. 즉, .sidebar 내부의 .tab-list 내부의 .mysla에 스타일을 적용하려면 이 선택자를 사용할 수 있습니다.
2. .sidebar.tab-list.mysla
   • 이 선택자는 HTML 문서 내에서 .sidebar, .tab-list, .mysla 클래스를 모두 가진 요소를 선택합니다.
   • 이 선택자는 이 세 클래스를 모두 동시에 가진 요소에 스타일을 적용하는 데 사용됩니다.
3. .sidebar, .tab-list, .mysla
   • 이 선택자는 HTML 문서 내에서 .sidebar, .tab-list, .mysla 클래스 중 하나 이상을 가진 모든 요소를 선택합니다.
   • 이 선택자는 이 세 개의 클래스 중 어느 하나라도 가진 모든 요소에 스타일을 적용하는 데 사용됩니다. 즉, .sidebar 클래스를 가진 요소, .tab-list 클래스를 가진 요소, 또는 .mysla 클래스를 가진 요소에 스타일을 적용할 수 있습니다.
4. .sidebar > .tab-list > .mysla
   • 이 선택자는 HTML 문서 내에서 다음과 같은 구조를 가진 요소를 선택합니다: .sidebar 클래스를 가진 요소의 자식인 .tab-list 클래스를 가진 요소의 자식인 .mysla 클래스를 가진 요소.
   • 이 선택자는 각 클래스가 직접적으로 다음 클래스의 부모-자식 관계를 가질 때만 스타일을 적용합니다. 즉, .sidebar 내부의 .tab-list 내부의 .mysla에 스타일을 적용하며, 중간에 다른 요소가 들어가면 선택되지 않습니다.

이러한 선택자는 CSS에서 특정 요소를 정확하게 선택하여 스타일을 적용하는 데 사용됩니다. 선택자의 구조와 용도에 따라 다양한 스타일을 적용할 수 있습니다.