<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Specificity</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div id="main"> <p> <a href="#">Link here</a> </p> </div> </div> </body> </html> a { color: black; } p a { color: purple; } div #main p a { color: yellow; } #main a { color: blue; } .container #main a { color: red; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter