요소가 4 개 이상인 경우 CSS 마지막 자식

ngplayground

jsFiddle- 래퍼 내에 4 개 이상의 컨테이너가있는 경우에만 마지막 요소를 강조 표시하도록 노력하고 있습니다. JS 대신 CSS를 사용하여이 작업을 수행 할 수 있습니까?

<div class="wrapper">
    <div class="container">Container #1</div>
    <div class="container">Container #2</div>
    <div class="container">Container #3</div>
    <div class="container">Container #4</div>
    <div class="container">Container #5</div>
</div>

.wrapper div:nth-child(n+4):last-child() {
   background-color: gold;
}
KiV

예. 이것을 달성 할 수 있습니다. 거의 약간의 수정이 있습니다.

바이올린 : http://jsfiddle.net/kiranvarthi/q5parpxy/4/

.wrapper div:nth-child(n+5):last-child {
   background-color: gold;
}

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

css 마지막 요소가 4의 배수 인 경우 마지막 4 개를 선택하고, 3의 배수 인 경우 마지막 3 개를 선택합니다.

분류에서Dev

PHP에 jQuery : 자식 요소가 2 개 이상인 경우 부모 요소에 선택기 클래스 추가

분류에서Dev

2 개만있는 경우 마지막 자식에 패딩 추가

분류에서Dev

N 번째 자식 CSS 대상 마지막 및 처음 3 개 자식

분류에서Dev

마지막 li가 링크 인 경우 마지막 자식 선택기가 작동하지 않습니다.

분류에서Dev

CSS 부모 마우스 오버시 자식 요소 글꼴 색상 변경

분류에서Dev

요소가없는 CSS 첫 번째 / 마지막 자식?

분류에서Dev

두 번째에서 마지막 문자가 숫자 인 경우

분류에서Dev

ArrayList의 마지막 요소 인 경우 문자 추가를 제외하는 방법

분류에서Dev

2 개 이상의 요소가있는 경우에만 타겟팅하는 CSS

분류에서Dev

숫자가 1000 이상인 경우 마지막 숫자를 선택하고 사용하는 방법

분류에서Dev

SVG 요소의 마지막 자식 높이 가져 오기

분류에서Dev

SVG 요소의 마지막 자식 높이 가져 오기

분류에서Dev

경로 정규식에서 마지막 2 개 또는 3 개 요소 가져 오기

분류에서Dev

문자의 마지막 인스턴스 뒤에 문자가있는 경우 정규식

분류에서Dev

CSS가 p 요소의 마지막 자식을 선택할 수 없습니다.

분류에서Dev

마지막 자식이 작동하지 않거나 devtool의 CSS 요소에 표시되지 않습니다.

분류에서Dev

마지막 자식이 작동하지 않거나 devtool의 CSS 요소에 표시되지 않습니다.

분류에서Dev

Pandas df-마지막 열이 비어있는 경우 숫자가있는 마지막 가능한 열 복사

분류에서Dev

부모에 (15,45,75,105) 요소가있는 경우 마지막 요소 만 숨기기 (CSS 전용)

분류에서Dev

JQuery 자식 요소 위로 마우스를 가져가 부모의 CSS를 변경합니다.

분류에서Dev

자식 요소 위로 마우스를 가져가 부모의 CSS를 변경 하시겠습니까?

분류에서Dev

글꼴 크기 CSS가 두 개 이상인 경우 요소 글꼴 크기 인라인 스타일을 얻는 방법

분류에서Dev

XSL 요소의 개수가 0 인 경우 사용자에게 메시지 표시

분류에서Dev

마지막 또는 첫 번째 문자가 공백 인 경우 셀 채색

분류에서Dev

요소가 목록의 마지막 요소 인 경우 True를 반환하는 함수가 있습니까?

분류에서Dev

CSS : 마우스 오버시 요소의 bacgkground 변경 : 부모의 배경이 아닌 자식의 배경 만 변경합니다 (바이올린, 그림).

분류에서Dev

예인 경우 배열이 있는지 확인한 다음 마지막 요소를 가져옵니다.

분류에서Dev

CSS n 번째 마지막 자식 브라우저 지원

Related 관련 기사

  1. 1

    css 마지막 요소가 4의 배수 인 경우 마지막 4 개를 선택하고, 3의 배수 인 경우 마지막 3 개를 선택합니다.

  2. 2

    PHP에 jQuery : 자식 요소가 2 개 이상인 경우 부모 요소에 선택기 클래스 추가

  3. 3

    2 개만있는 경우 마지막 자식에 패딩 추가

  4. 4

    N 번째 자식 CSS 대상 마지막 및 처음 3 개 자식

  5. 5

    마지막 li가 링크 인 경우 마지막 자식 선택기가 작동하지 않습니다.

  6. 6

    CSS 부모 마우스 오버시 자식 요소 글꼴 색상 변경

  7. 7

    요소가없는 CSS 첫 번째 / 마지막 자식?

  8. 8

    두 번째에서 마지막 문자가 숫자 인 경우

  9. 9

    ArrayList의 마지막 요소 인 경우 문자 추가를 제외하는 방법

  10. 10

    2 개 이상의 요소가있는 경우에만 타겟팅하는 CSS

  11. 11

    숫자가 1000 이상인 경우 마지막 숫자를 선택하고 사용하는 방법

  12. 12

    SVG 요소의 마지막 자식 높이 가져 오기

  13. 13

    SVG 요소의 마지막 자식 높이 가져 오기

  14. 14

    경로 정규식에서 마지막 2 개 또는 3 개 요소 가져 오기

  15. 15

    문자의 마지막 인스턴스 뒤에 문자가있는 경우 정규식

  16. 16

    CSS가 p 요소의 마지막 자식을 선택할 수 없습니다.

  17. 17

    마지막 자식이 작동하지 않거나 devtool의 CSS 요소에 표시되지 않습니다.

  18. 18

    마지막 자식이 작동하지 않거나 devtool의 CSS 요소에 표시되지 않습니다.

  19. 19

    Pandas df-마지막 열이 비어있는 경우 숫자가있는 마지막 가능한 열 복사

  20. 20

    부모에 (15,45,75,105) 요소가있는 경우 마지막 요소 만 숨기기 (CSS 전용)

  21. 21

    JQuery 자식 요소 위로 마우스를 가져가 부모의 CSS를 변경합니다.

  22. 22

    자식 요소 위로 마우스를 가져가 부모의 CSS를 변경 하시겠습니까?

  23. 23

    글꼴 크기 CSS가 두 개 이상인 경우 요소 글꼴 크기 인라인 스타일을 얻는 방법

  24. 24

    XSL 요소의 개수가 0 인 경우 사용자에게 메시지 표시

  25. 25

    마지막 또는 첫 번째 문자가 공백 인 경우 셀 채색

  26. 26

    요소가 목록의 마지막 요소 인 경우 True를 반환하는 함수가 있습니까?

  27. 27

    CSS : 마우스 오버시 요소의 bacgkground 변경 : 부모의 배경이 아닌 자식의 배경 만 변경합니다 (바이올린, 그림).

  28. 28

    예인 경우 배열이 있는지 확인한 다음 마지막 요소를 가져옵니다.

  29. 29

    CSS n 번째 마지막 자식 브라우저 지원

뜨겁다태그

보관