220927 CSS선택자

형제 선택자

h1 + h2{color: red;}
h1 ~ h2 { background: yellow;}
ul li + li{background: green;}
/
+ : 뒤에오는거 하나만
~ : 뒤에오는거 모두
/

속성선택자

input[type="text"] {background: blue; color: white;}
input[type="password"] {background: red;}
/ div img[src="images/ux/gif"] {border: solid 1px #f00;} /
/ div img[src ^="images/"] {border: solid 5px #f00;} /
/ div img[src $="g"] {border:solid 5px #f00;} /
/ div img[src = "images"] {border:solid 5px #f00;} */

    /* 
    ^ : 시작을 ""안에있는것
    $ : 끝이 "" 안에 있는것
    * : ""안에 있는 것을 포함하는것
     */
     

구조 선택자

/* h1:first-child{color:red;}
p:first-child{color:red;}
p:nth-child(2){color:red;}
p:last-child{color: red;}

    p:nth-last-child(2) {color:red;} */

    /* 형태구조선택자 */
    /* p:first-of-type {color:red;}
    p:nth-of-type(2) {color:red;}
    p:last-of-type {color:red;} */
    
    /* 여러개 선택 */
    section{border: solid 1px #000;}
    /* section p:nth-child(odd) {background: green;}
    section p:nth-child(even) {background: yellow;} */
    section p:nth-child(2n+1) {background: lightgreen;}
    section p:nth-child(2n) {background: yellow;}
    section p:nth-child(3n+1) {color: red;}
    

아코디언 위젯기능

/ #btn1을 체크하면 #content1의 높이가 300px이 되도록 /
#btn1:checked ~ #content1{height: 300px;}
/ input[id="btn1"]:checked ~ div[id="content1"]{height: 300px;} /

/ #btn2을 체크하면 #content2의 높이가 300px이 되도록 /
#btn2:checked ~ #content2{height: 300px;}
/ input[id="btn2"]:checked ~ div[id="content2"]{height: 300px;} /

    input[type="radio"]{display: none;}
    
<label for="btn1">제목1</label>
<input type="radio" name="check" id="btn1" checked>
<label for="btn2">제목2</label>
<input type="radio" name="check" id="btn2">

<div id="content1">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div id="content2">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>