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;
}
