Last active
August 12, 2016 15:58
-
-
Save jsgao0/41bf1184df417de3134e14e40c835c23 to your computer and use it in GitHub Desktop.
The difference between CSS selector *= and ~=. DEMO link: http://codepen.io/jsgao0/pen/oLmgPO/.
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>CSS selector *= vs ~=</title> | |
| </head> | |
| <body> | |
| <h1 class="header" data-now="day">ALL SHOPS</h1> | |
| <div class="promotion-bar" data-promotion-detail="day">John Bar</div> | |
| <div class="native-bar">Navy Bar</div> | |
| <div class="native-theather">Mar Theather</div> | |
| <div class="native-bar">Fary Bar</div> | |
| <div class="promotion-bar" data-promotion-detail="night">Good Bar</div> | |
| <div class="native-bar">Body Bar</div> | |
| <div class="promotion-theather" data-promotion-detail="day&night">Keny Theather</div> | |
| </body> | |
| </html> |
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
| div { | |
| height: 50px; | |
| width: 100%; | |
| } | |
| .header { | |
| color: #309090; | |
| text-align: center; | |
| } | |
| .header ~ div { | |
| border: 2px solid #A0A0A0; | |
| border-radius: 10px; | |
| box-sizing: border-box; | |
| color: #904010; | |
| margin-top: .5rem; | |
| padding: 1rem; | |
| } | |
| div[class*=promotion] { | |
| background: #FC9700; | |
| border: 2px solid transparent; | |
| color: #fff; | |
| } | |
| .header[data-now=day] ~ div[data-promotion-detail~="night"] { | |
| background: initial; | |
| border: 2px solid #A0A0A0; | |
| color: #904010; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment