CSS 일반 형제 선택기는 첫 번째 요소 다음에 오는 모든 요소를 선택하여 동일한 부모의 자식이 되도록 하는 데 사용됩니다.
구문
CSS 일반 형제 선택자의 구문은 다음과 같습니다.
element ~ element { /*declarations*/ }
다음 예는 CSS 일반 형제 선택자를 보여줍니다 -
예시
<!DOCTYPE html> <html> <head> <style> * { float: left; padding-left: 14px; list-style: none; } p ~ ul { box-shadow: inset 4px 0 3px lime; } </style> </head> <body> <ul> <li><img src="https://www.tutorialspoint.com/images/pl-sql.png"></li> </ul> <p>We provide learning tutorials, quizzes and video tutorials.</p> <ul> <li>Tutorials on databases and programming languages.</li> <li>Quizzes to check knowledge of databases and languages.</li> <li>Video Tutorials to easily understand the technologies.</li> </ul> <ul> <li><img src="https://www.tutorialspoint.com/images/mongodb.png"></li> <li><img src="https://www.tutorialspoint.com/images/db2.png"></li> <li><img src="https://www.tutorialspoint.com/images/sql.png"></li> </ul> </body> </html>
출력
이것은 다음과 같은 출력을 제공합니다 -
예시
<!DOCTYPE html> <html> <head> <style> * { float: left; padding: 10px; list-style: none; } img ~ p { background-color: burlywood; } </style> </head> <body> <p>This is demo text.</p> <img src="https://www.tutorialspoint.com/big_data_analytics/images/big-data-analytics-mini-logo.jpg"> <p>Learn Big Data Analytics at no cost.</p> </body> </html>
출력
이것은 다음과 같은 출력을 제공합니다 -