<div id ="group">
<img src= ' ' id = '1'>
<img src= ' ' id = '2'>
.......
</div>
I would like to reference all the img in the div id ‘group’ , how to mark it in css? Also, Which is better? Assign all to img / create a class eg. #img.groupItem and reference it everytime? Thanks
The source code:
<div id="book">
<img alt="flip book" src="demo/medium/Web081112_P001_medium.jpg">
<img alt="flip book" src="demo/medium/Web081112_P002_medium.jpg">
<img alt="flip book" src="demo/medium/Web081112_P003_medium.jpg">
</div>
After running the javascript:
<div id="page" style="display: block; width: 1180px; height: 767px; left: 50%; top: 50%; margin: -413.5px auto 0px -590px; cursor: default;">
<div id="book" style="position: relative; width: 1180px; height: 767px; transform: translate3d(0px, 0px, 0px);">
<div class="turn-page-wrapper" page="1" style="position: absolute; overflow: hidden; width: 590px; height: 767px; top: 0px; right: 0px; left: auto; bottom: auto; z-index: 0; display: none;">
<div id="cover" class="turn-page p1" style="width: 590px; height: 767px;">
</div>
</div>
<div class="turn-page-wrapper" page="2" style="position: absolute; overflow: hidden; width: 590px; height: 767px; top: 0px; left: 0px; right: auto; bottom: auto; z-index: 7;">
<div style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: auto; width: 968px; height: 968px;">
<div class="turn-page p2" style="width: 590px; height: 767px; position: absolute; top: 0px; left: 0px; bottom: auto; right: auto;">
<img alt="flip book" src="demo/medium/Web081112_P001_medium.jpg">
</div>
</div>
</div>
</div>
</div>
The html code is like that for a single img , I used the answer provided here but still not work. I believe this is the problem caused by generate html code?
CSS was meant to apply global styling with the help of selectors.
The descendant selector is what you are looking for: