CSS 선택기

현재 작업 중인 Firefox 문제에 대한 멘토의 제안에 따라 메시지를 CSS 3줄로 전환하는 JavaScript 코드 20줄 이상을 교체했습니다. 저를 포함하여 많은 개발자들이 CSS가 웹사이트를 얼마나 멀리 가져갈 수 있는지 이해함으로써 이점을 얻을 수 있습니다.

문제

이미 언급했듯이 내가 작업하고 있는 문제는 사용자에게 애드온이 없는 경우 메시지를 표시하고 사용자가 애드온이 있는 경우 해당 메시지를 숨기는 것으로 요약됩니다. 작동하는 솔루션을 얻기 위해 JS 메서드를 작성하여 메시지를 작성한 다음 메시지 요소의 표시 속성을 토글하는 메서드를 작성했습니다. 내 코드를 검토한 후 멘토는 ~ 선택기를 사용하도록 제안했습니다. 들어본 적이 없어서 조사를 좀 해봤습니다.

CSS 선택기

나는 요소의 이름, ID 또는 클래스를 사용하여 요소를 선택하는 데 익숙했습니다.

/* selects all the p elements */
p {
  color: blue;
}

/* selects all elements belonging to the class error */
.error {
  color: red;
}

/* selects the element with the id green-message*/
#green-message {
  color: green;
}

또한 이러한 선택기를 함께 연결하는 방법에 대해서도 알고 있었습니다.

/* selects all button elements belonging to the warning class */
button.warning {
  background-color: yellow;
}

하지만 선택자가 몇 개인지, 모든 가능성이 있는지는 알지 못했습니다. 다음은 몇 가지 예입니다!

/* selects all img elements in the image-container class */
.image-container img {
  margin: 5px;
}

/* selects all img elements that have the image-container class as a parent element */
.image-container>img {
  margin: 9px;
}

/* selects the first img element placed after an element belonging to the image-container class */
.image-container+img {
  margin: 7px;
}

/* selects p elements when user hovers over them */ 
p:hover {
  text-decoration: overline;
}

/* Selects every h2 that comes after a p element */
p ~ h2 {
  color: pink;
}

훨씬 더 많은 CSS 선택기가 있으며 w3schools 에서 확실히 확인해야 합니다.

Firefox로 돌아가기

솔직히 말해서 이 작업을 수행하기 위해 스타일 시트를 사용할 수 있다는 것이 너무 마음에 들었기 때문에 이것을 마지막으로 저장했습니다. 여기있어:

section:not(:empty) ~ #empty-addons-message {
  display: none;
}

이제 이러한 선택기가 함께 수행하는 작업은 섹션 요소가 비어 있지 않을 때 섹션 요소 뒤에 오는 ID가 #empty-addons-message인 요소를 선택하는 것입니다. 스타일 시트에 코딩할 수 있는 정말 미친 종류의 논리입니다! 다음에 디스플레이 로직을 추가하는 것을 고려할 때 CSS를 사용하여 작업을 수행할 수 있는지 확인하십시오!