WebTricks
Home
Home
Tutorials
Q&A Forum
Blog
Videos
Sign up / Register
CSS Combinators - Playground
Back to Lesson
HTML Code
<!DOCTYPE html> <html> <head> <title>CSS Combinators</title> <meta charset="UTF-8"> </head> <body> <h1>CSS Descendant Selector</h1> <div class="descendant"> <a href="#">This is a link styled with descendant selector.</a> <p><a href="#">This is a link styled with descendant selector.</a></p> <a href="#">This is a link styled with descendant selector.</a> </div> <style> .descendant a{ color: #096; font-size: 18px; text-decoration: none; } </style> <h1>CSS Child Selector</h1> <div class="child"> <a href="#">This is a link styled with child selector.</a> <p><a href="#">This is a link styled with child selector.</a></p> <a href="#">This is a link styled with child selector.</a> </div> <style> .child > a{ background: #096; color: #fff; font-size: 18px; padding: 5px; text-decoration: none; margin-bottom: 10px; display: block; } </style> <h1>CSS Adjacent Sibling Selector</h1> <div class="adjacent"> <a href="#">This is a link.</a> <a href="#">This is a link.</a> </div> <a href="#">This is another link styled with adjacent sibling selector.</a> <a href="#">This is another link styled with adjacent sibling selector.</a> <style> .adjacent + a{ color: #f00; font-size: 18px; text-decoration: none; display: block; } </style> <h1>CSS General Sibling Selector</h1> <div class="gen"> <a href="#">This is a link.</a> <a href="#">This is a link.</a> </div> <a href="#">This is another link styled with general siblings selector.</a> <a href="#">This is another link styled with general siblings selector.</a> <style> .gen ~ a{ background: #096; color: #fff; font-size: 18px; padding: 5px; text-decoration: none; margin-bottom: 10px; display: block; } </style> </body> </html>
CSS Code
/* Write your CSS here */
Run Code