그리드 컨테이너에서 선택한 요소의 조건부 스타일 지정

캘린더, 장바구니, 갤러리, 파일 탐색기 및 온라인 라이브러리는 선택 가능한 항목이 격자(예: 정사각형 격자)로 표시되는 일부 상황입니다. 횡단보도가 있는 모든 이미지를 선택하라는 보안 검사도 마찬가지입니다.

그리드에서 선택 가능한 옵션을 표시하는 깔끔한 방법을 찾았습니다. 아니요, 해당 reCAPTCHA를 다시 만드는 것이 아니라 단순히 여러 항목을 선택할 수 있습니다. 그리고 두 개 이상의 인접한 항목이 선택되면 영리하게 사용할 수 있습니다. :nth-of-type 결합자, 의사 요소 및 :checked 그룹화되어 보이는 방식으로 스타일을 지정하는 유사 클래스입니다.

둥근 체크박스를 얻기 위한 결합자와 의사의 전체 아이디어는 내가 쓴 이전 기사. 단순한 단일 열 디자인이었습니다.

그러나 이번에는 격자의 세로축과 가로축 모두를 따라 요소에 반올림 효과가 적용됩니다. 여기에서 알아야 할 모든 것을 다룰 것이기 때문에 체크박스 스타일 지정에 대한 내 마지막 기사를 읽을 필요가 없습니다. 그러나 이 기사에서 우리가 하고 있는 일에 대한 간략한 설명에 관심이 있다면 그 기사를 살펴볼 가치가 있습니다.

시작하기 전에…

몇 가지 사항을 메모해 두시면 도움이 될 것입니다. 예를 들어 단순화를 위해 데모에서 정적 HTML과 CSS를 사용하고 있습니다. 애플리케이션에 따라 그리드와 그 안의 항목을 동적으로 생성해야 할 수도 있습니다. 효과에 초점을 맞추기 위해 접근성에 대한 실용적인 검사는 생략하지만 프로덕션 환경에서 그런 종류의 것을 확실히 고려하고 싶을 것입니다.

또한 레이아웃에 CSS 그리드를 사용하고 있습니다. 저도 똑같이 추천드리고 싶지만, 물론 개인 취향일 뿐이며 주행 거리가 다를 수 있습니다. 저에게 그리드를 사용하면 형제 선택기를 사용하여 항목의 대상을 쉽게 지정할 수 있습니다. ::before 과 ::after 의사.

따라서 애플리케이션에서 사용하려는 레이아웃 표준이 무엇이든 CSS에서 의사를 계속 대상으로 지정할 수 있는지 확인하고 레이아웃이 다양한 브라우저와 화면에서 그대로 유지되도록 해야 합니다.

지금 시작합시다

이전 데모에서 눈치채셨겠지만, 체크박스 요소를 선택하거나 선택을 취소하면 주변의 다른 체크박스의 선택 상태에 따라 상자의 디자인이 수정됩니다. 이것은 자체 요소 대신 인접한 요소의 유사 요소를 사용하여 각 상자의 스타일을 지정했기 때문에 가능합니다.

다음 그림은 어떻게 ::before 각 상자의 의사 요소 칼럼 (첫 번째 열 제외) 상자가 왼쪽에 겹치고 어떻게 ::after 각 상자의 의사 요소 열 (첫 번째 행 제외) 위의 상자와 겹칩니다.

다음은 기본 코드입니다.

마크업은 매우 간단합니다.

<main> <input type=checkbox> <input type=checkbox> <input type=checkbox> <!-- more boxes -->
</main>

초기 CSS에서 조금 더 진행됩니다. 그러나 먼저 그리드 자체는 다음과 같습니다.

/* The grid */
main { display: grid; grid: repeat(5, 60px) / repeat(4, 85px); align-items: center; justify-items: center; margin: 0;
}

이것은 체크박스를 포함하는 XNUMX개의 행과 XNUMX개의 열로 구성된 그리드입니다. 나는 체크박스의 기본 모양을 지우고 그들에게 나만의 밝은 회색 배경과 매우 둥근 테두리를 주기로 결정했습니다.

/* all checkboxes */
input { -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 20px; cursor: pointer; display: grid; height: 40px; width: 60px; margin: 0;
}

또한 체크박스 자체가 그리드라는 점에 유의하십시오. 그것이 핵심입니다. ::before 과 ::after 유사 요소. 말하자면, 지금 해보자:

/* pseudo-elements except for the first column and first row */
input:not(:nth-of-type(4n+1))::before,
input:nth-of-type(n+5)::after { content: ''; border-radius: 20px; grid-area: 1 / 1; pointer-events: none;
}

그리드의 첫 번째 열이나 첫 번째 행에 없는 확인란의 유사 요소만 선택합니다. input:not(:nth-of-type(4n+1)) 첫 번째 확인란에서 시작한 다음 ::before 거기에서 네 번째 항목마다. 그러나 우리가 말하는 것을 주목하십시오 :not(), 그래서 정말로 우리가 하는 일은 건너뛰는 전에, ::before 첫 번째부터 시작하여 매 네 번째 확인란의 의사 요소입니다. 그런 다음 스타일을 적용합니다. ::after 다섯 번째 확인란의 모든 확인란의 의사.

이제 우리는 둘 다 스타일을 지정할 수 있습니다 ::before 과 ::after 그리드의 첫 번째 열이나 행에 없는 각 확인란에 의사를 표시하여 각각 왼쪽 또는 위로 이동하여 기본적으로 숨깁니다.

/* pseudo-elements other than the first column */
input:not(:nth-of-type(4n+1))::before { transform: translatex(-85px);
} /* pseudo-elements other than the first row */
input:nth-of-type(n+5)::after { transform: translatey(-60px); }

스타일링 :checked 상태

이제 체크박스가 다음 위치에 있을 때 스타일을 지정합니다. :checked 상태. 먼저 색상을 지정해 보겠습니다. limegreen 배경:

input:checked { background: limegreen; }

체크 박스는 인접한 체크 박스의 스타일을 모두 바꿀 수 있어야 합니다. 즉, 그리드에서 XNUMX번째 확인란을 선택하면 위, 아래, 왼쪽 및 오른쪽에 있는 상자를 둘러싸는 상자의 스타일도 지정할 수 있어야 합니다.

이것은 올바른 의사 요소를 대상으로 하여 수행됩니다. 어떻게 합니까? 글쎄, 그것은 그리드의 실제 열 수에 따라 다릅니다. 두 개의 인접한 상자가 5⨉4 그리드에서 선택되어 있는 경우 CSS는 다음과 같습니다.

/* a checked box's right borders (if the element to its right is checked) */
input:not(:nth-of-type(4n)):checked + input:checked::before { border-top-right-radius: 0; border-bottom-right-radius: 0; background: limegreen;
}
/* a checked box's bottom borders (if the element below is checked) */
input:nth-last-of-type(n+5):checked + * + * + * + input:checked::after { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (right side) checked box's left borders */
input:not(:nth-of-type(4n)):checked + input:checked + input::before { border-top-left-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (below) checked box's top borders */
input:not(:nth-of-type(4n)):checked + * + * + * + input:checked + input::before { border-top-left-radius: 0; border-top-right-radius: 0; background: limegreen;
}

원하는 경우 위의 코드를 동적으로 생성할 수 있습니다. 그러나 이미지 갤러리와 같은 일반적인 그리드에서는 열 수가 적고 고정된 수의 항목이 있는 반면 행은 계속 증가할 수 있습니다. 특히 모바일 화면용으로 설계된 경우. 그렇기 때문에 이 접근 방식은 여전히 ​​효율적인 방법입니다. 어떤 이유로 응용 프로그램에 제한된 행과 확장 열이 있는 경우 항목 스트림을 사용하여 CSS 그리드가 항목을 왼쪽에서 오른쪽으로, 위에서 아래로(즉, 행 단위로) 정렬하기 때문에 그리드를 옆으로 회전하는 것을 고려하십시오. .

또한 그리드의 마지막 체크박스에 대한 스타일을 추가해야 합니다. 각 축의 마지막 항목이므로 의사 요소로 모두 덮이지 않습니다.

/* a checked box's (in last column) left borders */
input:nth-of-type(4n-1):checked + input:checked { border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* a checked box's (in last column) adjacent (below) checked box's top borders */
input:nth-of-type(4n):checked + * + * + * + input:checked { border-top-left-radius: 0; border-top-right-radius: 0;
}

까다로운 선택자입니다! 첫번째…

input:nth-of-type(4n-1):checked + input:checked

… 기본적으로 다음과 같이 말하고 있습니다.

A 체크 <input> 체크 옆에 있는 요소 <input> 두 번째 마지막 열에서.

그리고 nth-of-type 다음과 같이 계산됩니다.

4(0) - 1 = no match
4(1) - 1 = 3rd item
4(2) - 1 = 7th item
4(3) - 1 = 11th item
etc.

따라서 우리는 세 번째 확인란에서 시작하여 거기에서 네 번째 확인란마다 선택합니다. 그리고 해당 시퀀스의 체크박스가 선택되어 있으면 인접한 체크박스의 스타일도 지정됩니다.

그리고 이 줄:

input:nth-of-type(4n):checked + * + * + * + input:checked

이렇게 말하고 있습니다.

An <input> 확인된 요소는 요소에 직접 인접하고 다른 요소에 직접 인접하고 다른 요소에도 직접 인접하며 차례로 다음 요소에 직접 인접합니다. <input> 체크 상태에 있는 요소.

이것이 의미하는 바는 선택된 네 번째 확인란마다 선택한다는 것입니다. 그리고 해당 시퀀스의 확인란이 선택되어 있으면 해당 확인란의 다음 네 번째 확인란도 선택되어 있는 경우 스타일을 지정합니다.

사용하기

우리가 방금 살펴본 것은 디자인 이면의 일반 원칙과 논리입니다. 다시 말하지만, 애플리케이션에서 얼마나 유용한지는 그리드 디자인에 달려 있습니다.

둥근 테두리를 사용했지만 다른 모양을 시도하거나 배경 효과를 실험할 수도 있습니다(Temani는 아이디어를 제공합니다.). 공식이 어떻게 작동하는지 알았으니 나머지는 전적으로 당신의 상상에 달려 있습니다.

다음은 간단한 달력에서 볼 수 있는 방법의 예입니다.

다시 말하지만 이것은 정적 마크업을 사용하는 대략적인 프로토타입일 뿐입니다. 그리고 캘린더 기능에서 고려해야 할 접근성 고려 사항이 많이 있을 것입니다.

---

그건 랩이야! 꽤 깔끔하죠? 무슨 일이 일어나고 있는지 정확히 "새로운" 것은 없습니다. 그러나 그것은 좋은 예입니다 물건 선택 CSS에서. 결합자와 의사를 사용하는 고급 선택 기술을 다룰 수 있다면 우리의 스타일 지정 능력은 한 항목의 스타일 지정을 훨씬 능가할 수 있습니다. 앞에서 보았듯이 다른 요소의 상태를 기반으로 조건부로 항목의 스타일을 지정할 수 있습니다.

---

그리드 컨테이너에서 선택한 요소의 조건부 스타일 지정 원래에 게시 CSS 트릭. 너는해야한다. 뉴스레터 받기.

• 코인스마트. 유럽 ​​최고의 비트코인 ​​및 암호화폐 거래소.
• 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 무료 액세스.
• 크립토호크. 알트코인 레이더. 무료 시험판.
• 출처: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/