Plain English explanation of this Angular app's layout [closed] - css

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
This is an angular app that displays a list of movies.
Link to plunker here: https://plnkr.co/edit/nSpPKefitlnDjoev3b0w?p=preview
In short, there are 6 elements in the ng-repeat loop to display the movies, and they are placed one next to the other with no margin, but with varying widths and colors depending on the order in which they appear(based on my limited understanding).
Index.html:
<div class="main" ng-controller="MainController">
<div class="container">
<div class="content">
<div ng-repeat="show in shows">
<div class="rank">{{$index + 1}}</div>
<div class="img_container">
<img class="img-responsive" ng-src="{{show.series_img}}">
</div>
<h2 class="series">{{show.series}}</h2>
<p class="genre">{{show.genre}}</p>
<p class="run-start">{{show.run_start}}</p>
<p class="description">{{show.description}}</p>
</div>
</div>
</div>
</div>
The interaction of these rules is what I find particularly confusing:
div.ng-scope:nth-child(odd) h2 {
width: 400px;
}
div.ng-scope:nth-child(even) p+p {
width: 400px;
}
p {
background: #f9f9f9;
display: block;
float: left;
font-size: 18px;
height: 200px;
margin: 0;
padding: 30px;
width: 200px;
}
div.ng-scope p+p {
background: #e5e5e5;
}
div.ng-scope p+p+p {
background: #000;
color: #fff;
font-size: 14px;
width: 800px;
}
I would also appreciate any links to tutorials explaining how ng-scope works in this context.

Answer 1

div.ng-scope selects the <div ng-repeat="show in shows"> element because the ng-repeat adds the ng-scope class to the element when it renders.
nth-child(odd) and nth-child(even) set the styles of the odd and even children of the elements' respective containers, respectively.
p affects all <p> elements, while p+p affects all <p> elements following immediately after another <p> element. p+p+p affects all <p> elements immediately following two <p> elements.
Check out this article for more information about the plus symbol in css: What does the "+" (plus sign) CSS selector mean?