CSS의 고급 요소 선택- 기술 및 예

의사 클래스

의사 클래스를 사용하면 요소의 특정 상태 또는 위치를 선택할 수 있습니다. 예를 들어 :hover 마우스 포인터가 요소 위에 있을 때 요소를 선택하고, :focus 선택되거나 포커스가 있을 때 요소를 선택하고, :nth-child() 그룹의 특정 자식 요소를 선택합니다.

예:

/* Select all links when hovered over and change the text color */  
a:hover {  
  color: red;  
}  
  
/* Select the <input> element when it is focused and change the border */  
input:focus {  
  border: 2px solid blue;  
}  
  
/* Select the second element in a group of <li> elements and change the text color */  
li:nth-child(2) {  
  color: green;  
}  

 

의사 요소

의사 요소를 사용하면 가상 요소를 만들어 기존 요소를 사용자 정의할 수 있습니다.

예를 들어 요소 앞뒤에 요소를 만들고 ::before 요소 의 첫 줄과 첫 글자를 선택합니다. ::after ::first-line ::first-letter

예:

/* Add content before each <p> element and style it */  
p::before {  
  content: ">> ";  
  font-weight: bold;  
  color: gray;  
}  
  
/* Style the first letter of <h1> element */  
h1::first-letter {  
  font-size: 2em;  
  font-weight: bold;  
  color: red;  
}  

 

조합기

연결기를 사용하면 선택기를 결합하여 관계에 따라 요소를 선택할 수 있습니다. 예를 들어 내부 element1 element2 를 선택하고 의 직계 자식 요소를 선택 하고 바로 뒤를 선택합니다. element2 element1 element1 > element2 element1 element1 + element2 element2 element1

예:

/* Select <span> elements inside an element with class "container" */  
.container span {  
  color: purple;  
}  
  
/* Select <li> elements that are direct children of <ul> */  
ul > li {  
  list-style-type: square;  
  color: blue;  
}  

 

속성 선택자

속성 선택기를 사용하면 속성 값에 따라 요소를 선택할 수 있습니다. 예를 들어 는 [attribute] 속성이 있는 요소를 선택하고 attribute 속성 [attribute=value] 이 attribute 와 같은 요소를 선택 value 하고 [attribute^=value] 속성이 로 attribute 시작하는 요소를 선택합니다 value.

예:

/* Select all elements with the attribute data-type */  
[data-type] {  
  font-weight: bold;  
  color: orange;  
}  
  
/* Select all <a> elements with the href attribute starting with "https://" */  
a[href^="https://"] {  
  color: blue;  
  text-decoration: underline;  
}  

 

:not() 선택자

선택기 를 사용하면 특정 선택기와 일치하지 않는 요소를 선택할 수 있습니다. 예를 들어 class가 없는 요소를 선택하고 ID 가 없는 요소를 선택합니다. :not() :not(.class) class :not(#id) id

예:

/* Select all <div> elements that do not have the class "hidden" */  
div:not(.hidden) {  
  display: block;  
  background-color: lightgray;  
}  
  
/* Select all <input> elements that do not have the ID "email-input" */  
input:not(#email-input) {  
  border: 1px solid gray;  
}  

 

이 예제는 CSS의 고급 요소 선택을 보여줍니다. 이러한 기술을 사용자 정의하고 적용하여 원하는 대로 웹 페이지의 요소 스타일을 지정하고 사용자 정의할 수 있습니다.