그리드 컨테이너의 선택된 요소를 조건부 스타일링합니다

많은 응용 프로그램 시나리오에서는 캘린더, 쇼핑 카트, 갤러리, 파일 브라우저 및 온라인 라이브러리와 같은 그리드에 선택 가능한 품목을 표시해야하며 Zebra 교차로가있는 모든 사진을 선택 해야하는 보안 검사도 필요합니다.

이 기사에서는 그리드에 옵션 항목을 표시하는 영리한 방법을 소개합니다. Recaptcha 대신 여러 항목을 선택할 수 있습니다. 두 개 이상의 인접한 프로젝트를 선택할 때 :nth-of-type combiner, pseudo element 및 :checked pseudo-class를 사용하여 그것들을 결합하여 보이게 만들 수 있습니다.

둥근 확인란을 구현하기위한이 콤비너와 의사 요소에 대한 아이디어는 이전에 쓴 기사에서 비롯됩니다. 간단한 단일 열 디자인입니다.

그러나 이번에는 둥근 코너 효과가 그리드의 수직 및 수평 축의 요소에 적용됩니다. Checkbox 스타일에서 이전 게시물을 읽을 필요는 없습니다. 여기서 알아야 할 모든 것을 다루기 때문입니다. 그러나이 기사에서 수행 된 작업의 단순화 된 버전에 관심이 있다면 해당 기사를 살펴볼 가치가 있습니다.

시작하기 전에…

다음 사항에 주목하는 것이 매우 유용합니다. 예를 들어, 단순화를 위해 데모에서 정적 HTML과 CSS를 사용했습니다. 응용 프로그램에 따라 그리드와 해당 항목을 동적으로 생성해야 할 수도 있습니다. 효과에 집중하기 위해 보조 기능의 실제 점검을 생략했지만 생산 환경에서는 이런 종류의 것을 고려해야합니다.

또한 레이아웃에는 CSS 그리드를 사용합니다. 나는 이것을하는 것이 좋습니다. 그러나 그것은 단지 개인적인 취향 일 뿐이며 당신의 경험은 다를 수 있습니다. 저에게 그리드를 사용하면 형제 선택기를 사용 ::after 프로젝트의 의사 요소 ::before 쉽게 찾을 수 있습니다.

따라서 애플리케이션에서 어떤 레이아웃 표준을 사용할 수 있는지에 관계없이 의사 요소가 여전히 CSS에 위치 할 수 있는지 확인하고 레이아웃이 다른 브라우저와 화면에서 동일하게 유지되도록하십시오.

시작합시다

이전 시연에서 알 수 있듯이 주변의 다른 확인란의 선택 상태에 따라 확인란 요소를 선택하고 선택 취소하면 상자의 디자인을 수정합니다. 이는 각 상자가 아닌 인접 요소의 의사 요소를 사용하기 때문입니다.

다음 그림은 각 열의 상자의 의사 요소 (첫 번째 열 제외)가 왼쪽의 상자와 겹치는 ::before 과 각 행 에서 상자의 의사 요소 (첫 번째 행 제외)가 위의 상자와 어떻게 겹치는지를 보여줍니다 ::after

이것은 기본 코드입니다

태깅은 매우 간단합니다.

<main></main>

초기 CS에는 더 많은 것이 있습니다. 그러나 우선, 그리드 자체 :

 /* 그리드*/
기본 {
  디스플레이 : 그리드;
  그리드 : 반복 (5, 60px) / 반복 (4, 85px);
  정렬 구조 : 센터;
  정당화 항목 : 센터;
  여백 : 0;
}

이것은 5 개의 요소와 체크 박스가 포함 된 4 개의 열의 그리드입니다. 나는 체크 박스의 기본 모양을 지우고 내 자신의 밝은 회색 배경과 하이퍼 라운드 테두리를 제공하기로 결정했습니다.

 /* 모든 확인란*/
입력 {
  -WebKit-Appearance : 없음;
  외관 : 없음;
  배경 : #ddd;
  Border-Radius : 20px;
  커서 : 포인터;
  디스플레이 : 그리드;
  높이 : 40px;
  너비 : 60px;
  여백 : 0;
}

또한 확인란 자체는 그리드입니다. 이것은 pseudo elements ::after ::before 및 ::를 넣는 열쇠입니다. 그렇게 말하면 지금 해보자.

 /* 첫 번째 열과 첫 번째 행을 제외한 의사 요소*/
입력 : NOT (: nth-of-type (4n 1)) :: 이전,
입력 : nth-of-type (n 5) :: 이후 {
  콘텐츠: '';
  Border-Radius : 20px;
  그리드 영역 : 1 / 1;
  포인터 이벤트 : 없음;
}

우리는 그리드의 첫 번째 열이나 행의 체크 박스에없는 의사 요소 만 선택합니다. input:not(:nth-of-type(4n 1)) 첫 번째 확인란으로 시작하여 4 개의 항목 ::before 선택합니다. 그러나 우리는 :not() ::before 하고 있습니다. 그런 다음 다섯 번째 확인란으로 시작하여 각 확인란의 의사 요소를 다음에 ::after 스타일을 적용합니다.

이제 우리는 그리드의 첫 번째 열이나 행에 있지 않은 각 확인란에 대해 ::before and ::after pseudo-elements를 스타일링하여 각각 왼쪽 또는 위쪽으로 이동하여 기본적으로 숨길 수 있습니다.

 /* 첫 번째 열을 제외한 의사 요소*/
입력 : not (: nth-of-type (4n 1)) :: 이전 {
  변환 : translatex (-85px);
}

/* 첫 번째 줄을 제외한 의사 요소*/
입력 : nth-of-type (n 5) :: 이후 {
  변환 : Translatey (-60px);
}

설정 : 확인 된 상태 스타일

이제 확인란이 :checked 과 같은 스타일입니다. 먼저, 라임 그린 배경과 같은 색상을 알려 드리겠습니다.

 입력 : 확인 {배경 : Limegreen};

선택한 상자는 인접한 모든 선택된 상자를 다시 유지할 수 있어야합니다. 다시 말해, 그리드에서 11 번째 확인란을 선택하면 위, 아래, 왼쪽 및 오른쪽의 상자를 스타일로 만들 수 있어야합니다.

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

 /* 선택한 상자의 오른쪽 경계 (오른쪽 요소가 선택된 경우)*/
입력 : NOT (: nth-of-type (4n)) : 확인 된 입력 : Checked :: 이전 {
  국경-오른쪽-라디우스 : 0;
  국경 바닥-오른쪽 래디 우스 : 0;
  배경 : 라임 그린;
}
/* 선택한 상자의 하한 (다음 요소가 선택된 경우)*/
입력 : n-last-of-type (n 5) : 점검 * * * 입력 : Checked :: after {
  국경 바닥-오른쪽 래디 우스 : 0;
  국경-바닥-왼쪽 라디우스 : 0;
  배경 : 라임 그린;
}
/* 선택한 상자의 왼쪽 경계 인접한 (오른쪽) 선택된 상자*/
입력 : not (: nth-of-type (4n)) : 확인 된 입력 : 확인 된 입력 :: prevere {
  경계 왼쪽-라디우스 : 0;
  국경-바닥-왼쪽 라디우스 : 0;
  배경 : 라임 그린;
}
/* 선택한 상자의 상한 (아래) 선택된 상자*/
입력 : NOT (: nth-of-type (4n)) : Checked * * * 입력 : 확인 된 입력 :: 이전 {
  경계 왼쪽-라디우스 : 0;
  국경-오른쪽-라디우스 : 0;
  배경 : 라임 그린;
}

원한다면 위의 코드를 동적으로 생성 할 수 있습니다. 그러나 일반적인 그리드 (예 : 그림 라이브러리)의 경우 열 수는 작고 고정 된 수의 항목 일 수 있지만 행은 계속 증가 할 수 있습니다. 특히 모바일 화면을 위해 설계된 경우. 그렇기 때문에이 접근법은 여전히 ​​효과적인 접근 방식입니다. 어떤 이유로 어떤 이유로 애플리케이션에 유한 행과 확장 열이 발생하면 일련의 프로젝트의 경우 CSS 그리드가 왼쪽에서 오른쪽으로, 위로 (즉, 행으로 행)를 정렬하기 때문에 그리드를 측면으로 회전시키는 것을 고려하십시오.

또한 그리드의 마지막 확인란에 스타일을 추가해야합니다. 각 축의 마지막 항목이기 때문에 의사 요소로 모두 오버레이되지 않습니다.

 /* 선택한 상자의 왼쪽 경계 (마지막 열)*/
입력 : nth-of-type (4N-1) : 확인 된 입력 : 확인 된 {
  경계 왼쪽-라디우스 : 0;
  국경-바닥-왼쪽 라디우스 : 0;
}
/* 선택한 상자의 상한 (마지막 열) 인접한 (하단) 점검 상자*/
입력 : nth-of-type (4n) : 확인 된 * * * 입력 : Checked {
  경계 왼쪽-라디우스 : 0;
  국경-오른쪽-라디우스 : 0;
}

이 선택기는 까다 롭습니다! 첫 번째 ...

 입력 : nth-of-type (4N-1) : 확인 된 입력 : 확인

... 기본적으로 다음과 같이 말합니다.

두 번째 열에서 선택된 요소는 선택된 요소 옆에 있습니다.

nth-of-type 의 계산 방법은 다음과 같습니다.

 <code>4(0) - 1 = 无匹配项4(1) - 1 = 第3 个项目4(2) - 1 = 第7 个项目4(3) - 1 = 第11 个项目等等。</code>

따라서 세 번째 확인란으로 시작하여 각 4 번째 확인란을 선택합니다. 시퀀스의 확인란이 선택되면 선택한 경우 인접한 확인란을 스타일로 만들 수 있습니다.

그리고이 줄 :

 입력 : nth-of-type (4n) : 확인 * * * 입력 : 확인

말한다 :

요소는 하나의 요소에 직접 인접하여 선택되면 요소는 다른 요소에 직접 인접 해 있고 요소는 다른 요소에 직접 인접하며 요소는 선택한 상태의 요소에 직접 인접 해 있습니다.

즉, 선택한 각 네 번째 확인란을 선택한다는 것을 의미합니다. 시퀀스의 확인란이 선택되면 선택한 경우 확인란에서 시작하여 다음 네 번째 확인란을 스타일링합니다.

사용하십시오

우리가 방금 본 것은 디자인의 일반적인 원칙과 논리였습니다. 다시, 응용 프로그램의 실용성은 메쉬 설계에 따라 다릅니다.

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

간단한 캘린더에서 보이는 것은 다음과 같습니다.

다시 말하지만, 이것은 정적 태그를 사용하는 거친 프로토 타입입니다. 또한, 캘린더 함수에서 고려해야 할 많은 보조 기능이 있습니다.

그게 다야! 매우 영리합니까? 내 말은, 무슨 일이 있었는지에 대해 완전히 "새로운"것은 없습니다. 그러나 CSS에서 사물을 선택하는 좋은 예입니다. 콤바이너와 의사 요소를 사용하여보다 고급 선택 기술을 마스터하면 스타일링 기능은 하나의 항목 만 설정하는 스타일을 넘어서 다른 요소의 상태를 기반으로 항목을 조건부 스타일로 만들 수 있습니다.

위 내용은 그리드 컨테이너의 선택된 요소를 조건부 스타일링합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!