CSS에서 보이지 않는 자식 처리하기

Question

나는 컨테이너 객체의 CSS 작업을하고 있습니다. 나는 대부분 일하고있다. 특히 나는 테스트 케이스 11과 12를보고 있습니다. :first-child과 :last-child을 처리 할 때 보이지 않는 아이들을 무시하고 싶습니다.

:visible:first-child을 사용하면 예상 한대로 작동하지 않는 것 같습니다. 그리고 google은 실패했습니다 ... : visible은 실제로 선택기가 아닙니다. jQuery입니다.

어쨌든 첫 번째/마지막으로 보이는 아이를 선택하는 CSS가 있습니까?

여기에 Codepen도 있습니다.

code, p, quote { 
 
    display: block; 
 
    position: relative; 
 
    margin: 0; 
 
    padding: 1em; 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
} 
 

 
code { 
 
    background-color: #ccc; 
 
} 
 

 
p { 
 
    background-color: #0df; 
 
} 
 

 
quote { 
 
    background-color: #fd0; 
 
} 
 

 
quote::after { 
 
    display: table; 
 
    clear: both; 
 
    content: ""; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
} 
 

 
.third { 
 
    height: 100%; 
 
    width: 33%; 
 
    float: left; 
 
    border: 1px solid black; 
 
} 
 

 
.container { 
 
    display: block; 
 
    position: relative; 
 
    margin-right: 0; 
 
    margin-left: 0; 
 
    margin-top: 1.5em; 
 
    margin-bottom: 1.5em; 
 
    padding: 0.5rem; 
 
    border: 1px solid black; 
 
    box-sizing: border-box; 
 
    border-radius: 10px; 
 
    box-shadow: none; 
 
} 
 

 
.container > :first-child { 
 
    border-top-left-radius: 10px; 
 
    border-top-right-radius: 10px; 
 
    border-bottom-left-radius: 0; 
 
    border-bottom-right-radius: 0; 
 
    border-width: 0; 
 
    margin-top: -0.5rem; 
 
    margin-bottom: -0.5rem; 
 
    margin-left: -0.5rem; 
 
    margin-right: -0.5rem; 
 
} 
 

 
.container > :last-child { 
 
    border-top-left-radius: 0; 
 
    border-top-right-radius: 0; 
 
    border-bottom-left-radius: 10px; 
 
    border-bottom-right-radius: 10px; 
 
    border-bottom-width: 0; 
 
    border-left-width: 0; 
 
    border-right-width: 0; 
 
    margin-top: 0.5rem; 
 
    margin-bottom: -0.5rem; 
 
    margin-left: -0.5rem; 
 
    margin-right: -0.5rem; 
 
} 
 

 
.container > :not(:first-child):not(:last-child) { 
 
    margin-left: -0.5rem; 
 
    margin-right: -0.5rem; 
 
    margin-bottom: -0.5rem; 
 
    border-right-width: 0; 
 
    border-left-width: 0; 
 
    border-bottom-width: 0; 
 
} 
 

 
.container > :only-child { 
 
    border-radius: 10px; 
 
    border-width: 0; 
 
    margin-top: -0.5rem; 
 
    margin-bottom: -0.5rem; 
 
    margin-left: -0.5rem; 
 
    margin-right: -0.5rem; 
 
}

<p>p</p> 
 
<br /> 
 
<code>code</code> 
 
<br /> 
 
<quote>quote</quote> 
 

 
<div id="0" class="container"> 
 
    text 
 
</div> 
 

 
<div id="1" class="container"> 
 
    <p>first child</p> 
 
    text 
 
    <code>last child</code> 
 
</div> 
 

 
<div id="2" class="container"> 
 
    <p>first child</p> 
 
    text 
 
</div> 
 

 
<div id="3" class="container"> 
 
    text 
 
    <p>last child</p> 
 
</div> 
 

 
<div id="4" class="container"> 
 
    <p>first child</p> 
 
    <code>last child</code> 
 
</div> 
 

 
<div id="5" class="container"> 
 
    <code>first child</code> 
 
    <p>last child</p> 
 
</div> 
 

 
<div id="6" class="container"> 
 
    <code>first child</code> 
 
    <code>last child</code> 
 
</div> 
 

 
<div id="7" class="container"> 
 
    <p>first child</p> 
 
    <p>last child</p> 
 
</div> 
 

 
<div id="8" class="container"> 
 
    <code>only child</code> 
 
</div> 
 

 
<div id="9" class="container"> 
 
    <p>first child</p> 
 
    <quote>middle child</quote> 
 
    <quote>middle child</quote> 
 
    <p>last child</p> 
 
</div> 
 

 
<div id="10" class="container"> 
 
    <quote> 
 
    <div class="third">1</div> 
 
    <div class="third">2</div> 
 
    <div class="third">3</div> 
 
    </quote> 
 
</div> 
 

 
<div id="11" class="container"> 
 
    <quote class="hidden">hidden child</quote> 
 
    <p>first child</p> 
 
    <p>last child</p> 
 
</div> 
 

 
<div id="12" class="container"> 
 
    <p>first child</p> 
 
    <p>last child</p> 
 
    <quote class="hidden">hidden child</quote> 
 
</div>

Answer 1

이 더 없습니다 : 보이는 선택,하지만 (이미처럼) 숨겨진 요소를 선택하는 몇 가지 클래스를 사용할 수 있으므로이 다음과 같아야합니다

.hidden + :not(.hidden) { 
    //code you want to set to first visible child goes here 
} 
.hidden + :not(.hidden) ~ :not(.hidden) { 
    //code to reset stuff what you've set before 
}