Last active
November 7, 2023 12:02
-
-
Save CodeLeom/a9c54d049ecede18af65ded42030066a to your computer and use it in GitHub Desktop.
Explaining CSS Selectors
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=\], initial-scale=1.0"> | |
| <title>Document</title> | |
| <style> | |
| .box { | |
| box-sizing: border-box; | |
| width: 160px; | |
| border: 10px solid black; | |
| padding: 20px; | |
| margin: 0px; | |
| } | |
| p strong { | |
| color: blue; | |
| } | |
| div { | |
| background-color: #000; | |
| color: white; | |
| } | |
| div + p { | |
| margin-top: 50px; | |
| border: 1px solid red; | |
| } | |
| /* paragraph child of a div */ | |
| div > p { | |
| padding: 20px; | |
| background-color: coral; | |
| } | |
| p.btn { | |
| width: 70px; | |
| padding: 2px; | |
| border: 1px solid #eee; | |
| border-radius: 50px; | |
| background-color: wheat; | |
| color: black; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p class="btn">Pick Me</p> | |
| <h1>Basic Selectors</h1> | |
| <ul> | |
| <li>Element: h1, p, div</li> | |
| <li>ID: #</li> | |
| <li>Class: . (dot)</li> | |
| <li>Attibute: [href], </li> | |
| <li>universal selectors: *</li> | |
| </ul> | |
| <h1>Complex Selectors</h1> | |
| <ul> | |
| <li>child</li> | |
| <li>next sibling</li> | |
| <li> > </li> | |
| <li>compound</li> | |
| </ul> | |
| <p>I am a paragraph with a <strong>bold text</strong> as an example</p> | |
| <span> | |
| <p>hello, I am testing if this <strong>text will change</strong> | |
| color</p> | |
| </span> | |
| <p>hello Kyenpya</p> | |
| <div> | |
| <p>hello Keziah</p> | |
| <p>hello Keziah</p> | |
| <p>hello Keziah</p> | |
| </div> | |
| <p>hello Kyenpya</p> | |
| <p>Second Paragraph</p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment