CSS와 요즘 JavaScript가 없는 웹사이트는 상상하기 어렵습니다. JavaScript는 웹사이트에 더 많은 기능을 제공합니다. 그러나 당신이 초보자라면 웹개발 경력을 막 시작했고 창의적인 아이디어가 있지만 디자인에 이러한 JavaScript 기능 중 일부를 추가할 JavaScript 지식이 없습니다. 따라서 여기에서 다음과 같은 아이디어 중 하나에 대해 설명하겠습니다. 토글 메뉴 또는 슬라이딩 작업 표시줄 메뉴 또는 회전식 갤러리 또는 사용후기 등이 있습니다.
그래서 여기에서는 CSS Next 및 Previous(예, PREVIOUS) 형제 요소 선택기에 대해 설명합니다.
다음 형제 선택자에 대해 먼저 이야기해 보겠습니다.

+ 다음 형제 선택자

다음 형제 선택기를 사용하여 다른 특정 요소 바로 뒤에 있는 요소의 속성을 변경하거나 이것을 사용하여 인접한 형제 요소의 속성을 변경할 수 있다고 말할 수 있습니다.

위의 스니펫에서 볼 수 있듯이 h1과 p 태그 사이에 + 기호가 있습니다. 여기서 p는 h1에 인접한 형제입니다. 이제 h1 위로 마우스를 가져가면 p 태그의 속성이 변경되는 것을 볼 수 있습니다.

~ 일반 다음 형제 선택기

일반적인 다음 형제 선택기를 사용하면 다음 형제 요소 중 일부 또는 모두를 선택할 수 있지만 다음 형제 선택기를 사용하면 인접한 형제 요소만 선택할 수 있습니다.

위의 스니펫에서 볼 수 있듯이 h1과 p 태그 사이에 ~ 기호가 있지만 그 사이에 또 ​​다른 형제 h2 태그가 있지만 영향을 미치지 않으며 p가 다음 인접 형제가 아니지만 p 태그의 속성을 변경할 수 있습니다. h1의.
원하는 경우 p 태그의 속성 변경과 함께 h1과 p 사이에 있는 h2의 속성도 변경할 수 있습니다.

지금까지 다음 형제 선택자에 대해 이야기했지만 이전 형제 선택자는 어떻습니까?
불행하게도 CSS에는 이전 형제 선택자가 없지만 axe(ACSSSS)-Augmented Cascading Style Sheet Syntax에는 이전 또는 이전 형제 선택자가 있습니다.

ACSSSS를 사용할 때 html 파일에 이 라이브러리를 추가하는 것을 잊지 마십시오.

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

? 바로 이전 형제 선택자

이전 형제 선택자를 사용하여 다른 특정 요소 바로 앞에 있는 요소의 속성을 변경하거나 이를 사용하여 바로 앞 요소의 속성을 변경할 수 있다고 말할 수 있습니다.

위 스니펫에서 볼 수 있듯이 ? p와 h1 태그 사이에 로그인합니다. 여기서 h1은 p의 바로 앞 형제입니다. 이제 p 태그 위로 마우스를 가져가면 h1 태그의 변경 사항을 볼 수 있습니다.

! 일반 이전 형제자매 선택기

일반적인 이전 형제 선택기를 사용하면 이전 또는 이전 형제 요소 중 일부 또는 전체를 선택할 수 있지만 이전 형제 선택기를 사용하면 바로 이전 형제 요소만 선택할 수 있습니다.

위의 스 니펫에서 볼 수 있듯이 ! p와 h1 태그 사이에 로그인하지만 그 사이에 또 ​​다른 형제 h2 태그가 있지만 영향을 미치지 않으며 h1이 p 태그의 바로 앞 형제가 아니지만 h1 태그의 속성을 변경할 수 있습니다.
원하는 경우 p 태그의 속성 변경과 함께 h1과 p 사이에 있는 h2의 속성도 변경할 수 있습니다. 이것은 아래의 예를 통해 더 명확해질 것입니다:-

이 주제와 관련된 더 많은 디자인을 보려면 CodePen에서 내 펜을 확인하십시오.

읽어주셔서 감사합니다. 첫 글입니다.


어떤 피드백이라도 대단히 감사하겠습니다.


또는