Attribute Matching in CSS Selectors Live Preview

{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{"gridIframeSandboxAttributes":"allow-forms allow-modals allow-pointer-lock allow-presentation allow-same-origin allow-scripts"},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; web-share; vr","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__user":{"anon":true,"base_url":"/anon/","current_team_id":0,"current_team_hashid":null,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjUzMjAxNTg5LCJpYXQiOjE2NTMxOTc5ODksImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.GCwa3gfidnc8LGFdT2Rtzyjkwz6Nz6aGrYG21-uO1uLRpdDHwPWZIHi5zvgPI_wcDOBx1nS_uZw9ijIw1dnGLp_ym32M7hle2Qi-tlj1BF0puDdMq0qaiRLywGHYQtvFkUjuEUWpMiCVrLcU3VekyB1Xud1Qw7gf9hCJiTd5Vf1QQ8kJ4RXNUOXE5f3apYZB3bZ0770GVrqf9N1OlOuTjUuOMkGihltlFQKEQvPhWozS4RoL2fqcOoCfqlYezLBkkJuU0lJT8JKwt8RfwrrT-T3RtFpb9rAvNMBRsnuK3paeXYjugnuAnJZXs72jy2RGRVWs6aw4fbAaSyNR356JiA"},"__graphql":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar80":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=512&version=0&width=512","currentContext":{"id":"VoDkNZ","baseUrl":"/anon","title":"Captain Anonymous","name":"Captain Anonymous","avatar80":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=80&version=0&width=80","avatar512":"https://assets.codepen.io/t-1/user-default-avatar.jpg?fit=crop&format=auto&height=512&version=0&width=512","username":"anon","contextType":"User","__typename":"User"},"currentTeamId":null,"baseUrl":"/anon","username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"teams":[],"__typename":"User"}}},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":11425055,\"user_id\":927610,\"html\":\"\\n<link rel=\\\"stylesheet\\\" href=\\\"https:\\/\\/maxcdn.bootstrapcdn.com\\/font-awesome\\/4.7.0\\/css\\/font-awesome.min.css\\\">\\n\\n<main role=\\\"main\\\">\\n  <section>\\n  <h2>Using Attribute Selectors<\\/h2>\\n    \\n  <ul class=\\\"link-icons\\\">\\n    <li><a href=\\\"https:\\/\\/themify.me\\\">Themify<\\/a><\\/li>\\n    <li><a href=\\\"file.pdf\\\">File Link<\\/a><\\/li>\\n    <li><a href=\\\"http:\\/\\/icondock.com\\\" target=\\\"_blank\\\">Free Icons<\\/a><\\/li>\\n    <li><a href=\\\"http:\\/\\/webdesignerwall.com\\/archives\\\">More Tutorials<\\/a><\\/li>\\n  <\\/ul>\\n  <\\/section> \\n  <footer>\\n <a href=\\\"http:\\/\\/www.webdesignerwall.com\\/tutorials\\/the-power-of-css-selectors-and-how-to-use-them\\\" alt=\\\"font awesome\\\" target=\\\"_blank\\\"><button id=\\\"fontawesome\\\">View Tutorial<\\/button><\\/a>\\n<\\/footer>\\n<\\/main>\\n\\n\\n\",\"css\":\".link-icons a {\\n\\ttext-decoration: none;\\n\\tcolor: #f05053;\\n}\\n.link-icons a:before {\\n\\tfont-family: FontAwesome;\\n\\tcolor: #f05053;\\n\\tpadding: 2px 5px;\\n\\tmargin-right: 4px;\\n\\tborder-radius: 3px;\\n}\\n\\n\\/* https icon *\\/\\n.link-icons a[href^=\\\"https\\\"]:before {\\n\\tcontent: \\\"\\\\f023\\\";\\n}\\n\\n\\/* PDF file icon *\\/\\n.link-icons a[href$=\\\".pdf\\\"]:before {\\n\\tcontent: \\\"\\\\f1c1\\\";\\n}\\n\\n\\/* new window icon *\\/\\n.link-icons a[target=_blank]:before {\\n\\tcontent: \\\"\\\\f2d2\\\";\\n}\\n\\n\\/* article icon *\\/\\n.link-icons a[href*=\\\"webdesignerwall\\\"]:before {\\n    content: \\\"\\\\f0f6\\\";\\t\\n}\\n\\n#fontawesome-flag{\\n\\tbackground-color: #f05053;\\n}\\n\\n#fontawesome-flag a::before{\\n   color: #FFF;\\n   content: \\\"\\\\f2b4\\\";\\n}\\n\\n@media (max-width: 667px) {\\n  h1, button{display: none;}\\n  .link-icons{\\n    flex-flow: column wrap;\\n    text-align: left;\\n    height: auto;\\n  }\\n}\\n\\n\\/* MAIN CSS *\\/\\nhtml{\\n\\t\\/* Permalink - use to edit and share this gradient: http:\\/\\/colorzilla.com\\/gradient-editor\\/#ff5db1+0,ef017c+100;Pink+3D+%231 *\\/\\n\\tbackground: #ff5db1; \\/* Old browsers *\\/\\n\\tbackground: -moz-linear-gradient(top,  #e1eec3 0%, #f05053 100%); \\/* FF3.6-15 *\\/\\n\\tbackground: -webkit-linear-gradient(top,  #e1eec3 0%,#f05053 100%); \\/* Chrome10-25,Safari5.1-6 *\\/\\n\\tbackground: linear-gradient(to bottom,  #e1eec3 0%,#f05053 100%); \\/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ *\\/\\n\\tfilter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1eec3', endColorstr='#f05053',GradientType=0 ); \\/* IE6-9 *\\/\\n  height: 100%;\\n}\\nhtml, body{\\n  padding: 0;\\n  margin: 0;\\n}\\n\\nbody{\\n  min-height: 100%;\\n}\\na{\\n\\tcolor: #FFF;\\n\\tfont-family: sans-serif;\\n\\ttransition: all ease-in-out .3s;\\n\\t\\t\\n}\\na:hover{\\n  color: #0CF;\\n}\\n\\nmain{\\n\\tdisplay: flex;\\n  justify-content: center;\\n  flex-direction: column;\\n  flex-wrap: wrap;\\n  margin: 6%;\\n}\\nsection{\\n\\ttext-align: center;\\n  margin: 0 auto;\\n\\twidth: 100%;\\n\\tmax-width: 720px;\\n}\\nh1, h2{\\n\\tcolor: #FFF;\\n\\tfont-weight: bold;\\n\\tfont-size: 2rem;\\n}\\nbutton{\\n  border: 0px;\\n  border-radius: 5px;\\n  cursor: pointer;\\n  height: 40px;\\n  line-height: 40px;\\n  padding: 0 20px;\\n  text-transform: uppercase;\\n}\\nul{\\n\\tbackground: #FFF;\\n\\tborder-radius: 10px;\\n\\tdisplay: flex;\\n\\tflex-flow: row wrap;\\n\\tjustify-content: center;\\n\\theight: 40px;\\n\\t-webkit-box-shadow: 0px 1px 1px 1px #f05053;\\n  -moz-box-shadow: 0px 1px 1px 1px #f05053;\\n  box-shadow: 0px 1px 1px 1px #f05053;\\n}\\nli{\\n\\tlist-style-type: none;\\n\\tpadding: 0 20px;\\n\\ttransition: all ease-in-out .3s;\\n}\\nli a{\\n  color: #777;\\n\\tdisplay: block;\\n\\tfont-size: .8rem;\\n  height: 100%;\\n  line-height: 40px;\\n\\ttext-transform: uppercase;\\n  text-decoration: none;\\n}\\nli:hover{\\n\\t-webkit-box-shadow: inset 0px 0px 48px 2px #f4f4f4;\\n\\t-moz-box-shadow: inset 0px 0px 48px 2px #f4f4f4;\\n\\tbox-shadow: inset 0px 0px 48px 2px #f4f4f4;\\n}\\nfooter{\\n  width: 100%;\\n  margin: 4% auto;\\n\\ttext-align: center;\\n}\\nfooter p{\\n\\tfont-size: .8rem;\\n\\tfont-weight: bold;\\n\\tcolor: #FFF;\\n}\\n#fontawesome{\\n\\tbackground-color: #f05053;\\n  color: #FFF;\\n}\\n#fontawesome:hover{margin-top: 1px;}\\n#fontawesome::before{\\n  font-family: \\\"FontAwesome\\\";\\n\\tcontent: \\\"\\\\f2b4\\\";\\n  padding-right: 10px;\\n}\\n#tutorial{\\n  background-color: #f05053;\\n  color: #FFF;\\n}\",\"parent\":11135882,\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"css_prefix_free\":null,\"css_external\":null,\"js_library\":null,\"js_modernizr\":null,\"js_external\":null,\"created_at\":\"2016-12-07T18:32:42.000Z\",\"updated_at\":\"2018-05-23T19:12:36.000Z\",\"session_hash\":\"fa69e6d88bd272d0eb0b21b837d6d089\",\"title\":\"Attribute Matching in CSS Selectors\",\"description\":\"\",\"slug_hash\":\"ObZYWr\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"07f863e2d2b5266f41a85bf6f5847465\",\"has_animation\":false,\"css_pre_processor_lib\":\"\",\"checksum\":0,\"screenshot_uuid\":\"130a846e-5036-4194-afee-9507bbe8b0e5\",\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"js_module\":false,\"deleted_at\":null,\"deleted_by_user_id\":null,\"hard_delete_at\":null,\"pen_hash\":null,\"hashid\":\"ObZYWr\"}"}