반응형
선택자(selector)에 추가된 키워드
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Selector - Pseudo Selector</title> <style> input[type="submit"]{ background-color: red; } input[required] { background-color: blue; } /* input과 형제 요소인 .box 선택 */ input + .box { background-color: darkorange; } .box { background-color: black; height: 200px; color: white; } /* 형제 요소 그룹 중 마지막 요소 */ .box:last-child{ background-color: yellow; } /* .box 각 각의 형제 요소 그룹 중 첫 번째 요소(맨 첫줄이 .box여야만 함.), nth-child(1)과 동일 */ .box:first-child{ background-color: pink; } /* .box만으로 형제가 구성되어 있을 때 적용 */ .box:nth-child(2){ background-color: blueviolet; } /* .box 각 각의 형제 요소 그룹 중 2n+1 번째 요소마다 선택 */ .box:nth-child(2n+1){ border: 30px solid peru; } .boxChild { width: 100px; background-color: bisque; } /* 자식 연결자 */ .container > .box { background-color: red; } </style> </head> <body> <div class="container"> <div class="box">1 <div class="boxChild"> box-child </div> </div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box"> 7 <!-- required="required" --> <input type="password" required> <input type="submit"> <div class="box">1-1</div> <div class="box">1-2</div> <div class="box">1-3</div> <div class="box">1-4</div> <div class="box">1-5</div> </div> </div> </body> </html> | cs |
참고사이트▼
노마드 코더 - Nomad Coders
'CSS' 카테고리의 다른 글
| Clearfix Hack과 flow-root (0) | 2019.01.29 |
|---|---|
| Font Awesome (버전 4와 버전 5 사용 방법) (0) | 2019.01.04 |
| media query (0) | 2019.01.03 |
| animations (0) | 2019.01.03 |
| flexbox(Flexible Box module) (0) | 2018.12.29 |
댓글