HTML and CSS Reference
In-Depth Information
p {
margin: 0;
color: #000000;
li:nth-child(odd) {
background: #97B2D9;
Add the preceding code to your SASS file just underneath the .list style. If you
place it before the .list style, the styles that you intended to overwrite will be
overridden by the styles placed below the .movie-list style, which in this case
is .list . As you can see, there's a li:nth-child(odd) style, which will style
every odd list item. This will style the background color of every odd list item
differently to help the user distinguish the different items in the list and make it
easier for them to target where to tap.
Your final movie-list and list SASS should look like the following code.
* Standard list
.list {
margin: 0;
padding: 0;
li {
padding: 10px;
overflow: hidden;
height: 82px;
display: block;
border-bottom: 1px solid #CCCCCC;
.preview-image {
float: left;
width: 60px;
height: 82px;
text-align: center;
margin-right: 10px;
Search WWH ::

Custom Search