CSS Selectors
Selector Examples Name Notes > a > b a > b > c Child Matches when element B is one level below (the child) of element A.
Selector Examples Name Notes > a > b a > b > c Child Matches when element B is one level below (the child) of element A.
See Styling Ordered List Numbers ol, ul { counter-reset:li; } ol > li, ul > li { position: relative; margin: 0 0 0px 2em; list-style: none; } ol > li:before, ul > li:before { content: counter(li); counter-increment: li; position: absolute; left: -2em; width: 2em; margin-right: 8px; font-weight: 600; text-align: center; } ul > li:before {
img.responsive { max-width: 100%; -ms-interpolation-mode: bicubic; }
The more of these “best-practices” you follow, the easier your job will be. Style the smallest view first. Work outward, pulling the view wider until something gets ugly, create a media query, and fix it. The design dictates the breakpoints, NOT the device size. Popular device sizes change constantly, better to make the design expand
<style>/* CSS code here */</style> <link rel=”stylesheet” name=”myStyles” href=”myStyles.css”> The name attribute is optional and for humans only. W3: HTML5 link MDN: link
.group:after { content: “”; display: table; clear: both; }
A cheat-sheet with reminders, references and examples for working with CSS and SASS.