css3 - Couldn't understand CSS selectors meaning in the juizy slideshow stylesheet code -
i'm trying add juizy slideshow site page need understand how it's made in order synchronize animations (slidings) own customs animations want add page well.
in addition brief technical explanations in first link, here there more details (but in french , downladable code *1 different of discussed 1 author made improvements on downloadable version).
<body> <span id="sl_play" class="sl_command"> </span> <span id="sl_pause" class="sl_command"> </span> <span id="sl_i1" class="sl_command sl_i"> </span> <span id="sl_i2" class="sl_command sl_i"> </span> <span id="sl_i3" class="sl_command sl_i"> </span> <span id="sl_i4" class="sl_command sl_i"> </span> <section id="slideshow"> <a class="commands prev commands1" href="#sl_i4" title="go last slide"><</a> <a class="commands next commands1" href="#sl_i2" title="go 2nd slide">></a> <a class="commands prev commands2" href="#sl_i1" title="go 1rst slide"><</a> <a class="commands next commands2" href="#sl_i3" title="go 3rd slide">></a> <a class="commands prev commands3" href="#sl_i2" title="go 2nd slide"><</a> <a class="commands next commands3" href="#sl_i4" title="go 4th slide">></a> <a class="commands prev commands4" href="#sl_i3" title="go 3rd slide"><</a> <a class="commands next commands4" href="#sl_i1" title="go first slide">></a> <a class="play_commands pause" href="#sl_pause" title="maintain paused">pause</a> <a class="play_commands play" href="#sl_play" title="play animation">play</a> <div class="container"> <div class="c_slider"></div> <div class="slider"> <figure> <img src="img/dummy-640x310-1.jpg" alt="" width="640" height="310" /> <figcaption>the mirror of soul</figcaption> </figure><!-- --><figure> <img src="img/dummy-640x310-2.jpg" alt="" width="640" height="310" /> <figcaption>let's cross bridge when come it</figcaption> </figure><!-- --><figure> <img src="img/dummy-640x310-3.jpg" alt="" width="640" height="310" /> <figcaption>sushi<em>(do)</em> time</figcaption> </figure><!-- --><figure> <img src="img/dummy-640x310-4.jpg" alt="" width="640" height="310" /> <figcaption>waking life</figcaption> </figure> </div> </div> <span id="timeline"></span> <ul class="dots_commands"><!-- --><li><a title="show slide 1" href="#sl_i1">slide 1</a></li><!-- --><li><a title="show slide 2" href="#sl_i2">slide 2</a></li><!-- --><li><a title="show slide 3" href="#sl_i3">slide 3</a></li><!-- --><li><a title="show slide 4" href="#sl_i4">slide 4</a></li> </ul> </section> </body> and stylesheet code it:
#slideshow { position: relative; width: 640px; height: 310px; padding: 15px; border: 1px solid #ddd; margin: 0 auto 2em; background: #fff; background: -webkit-linear-gradient(#fff, #fff 20%, #eee 80%, #ddd); background: -moz-linear-gradient(#fff, #fff 20%, #eee 80%, #ddd); background: -ms-linear-gradient(#fff, #fff 20%, #eee 80%, #ddd); background: -o-linear-gradient(#fff, #fff 20%, #eee 80%, #ddd); background: linear-gradient(#fff, #fff 20%, #eee 80%, #ddd); -webkit-border-radius: 2px 2px 2px 2px; -moz-border-radius: 2px 2px 2px 2px; border-radius: 2px 2px 2px 2px; -webkit-box-shadow: 0 0 3px rgba(0,0,0, 0.2); -moz-box-shadow: 0 0 3px rgba(0,0,0, 0.2); box-shadow: 0 0 3px rgba(0,0,0, 0.2); } /* here other rules #timeline , .dots_commands removed make shorter code */ /* play/pause commands */ .play_commands { position: absolute; width: 22px; height: 22px; top: 25px; right: 25px; z-index: 10; text-indent: -9999px; border:0 none; opacity: 0; -webkit-transition: opacity 1s, right 1s; -moz-transition: opacity 1s, right 1s; transition: opacity 1s, right 1s; } .play { right: 55px; cursor: default; } .pause:hover { border:0 none; } .play_commands:focus { outline:0; } #slideshow:hover .pause, #sl_play:target ~ #slideshow:hover .pause, .play_commands:focus { opacity: 1; } .sl_command:target ~ #slideshow:hover .pause, #sl_pause:target ~ #slideshow:hover .pause { opacity: 0; } .pause:after, .pause:before { position: absolute; display: block; content: " "; top:0; width:38%; height: 22px; background: #fff; background: rgba(255,255,255,0.5); } .pause:after { right:0; } .pause:before { left:0; } .play { width: 1px; height: 1px; border-top: 10px solid transparent; border-left: 20px solid #fff; border-left: 20px solid rgba(255,255,255,0.5); border-bottom: 10px solid transparent; opacity: 0; } .play:hover, .play:focus { border-bottom: 10px solid transparent; } #slideshow .container { position:relative; width: 640px; height: 310px; overflow: hidden; } /* timeline base */ #slideshow .container:after { position:absolute; bottom: 0; left:0; content: " "; background: #999; width: 100%; height: 1px; } @-webkit-keyframes slider { 0%, 20%, 100% { left: 0 } 25%, 45% { left: -100% } 50%, 70% { left: -200% } 75%, 95% { left: -300% } } @-moz-keyframes slider { 0%, 20%, 100% { left: 0 } 25%, 45% { left: -100% } 50%, 70% { left: -200% } 75%, 95% { left: -300% } } @keyframes slider { 0%, 20%, 100% { left: 0 } 25%, 45% { left: -100% } 50%, 70% { left: -200% } 75%, 95% { left: -300% } } #slideshow .slider { position: absolute; left:0; top:0; width: 400%; height: 310px; -webkit-animation: slider 32s infinite; -moz-animation: slider 32s infinite; animation: slider 32s infinite; } .sl_i:target ~ #slideshow .slider { -webkit-transition: left 1s; -moz-transition: left 1s; transition: left 1s; } .sl_command:target ~ #slideshow .slider { -webkit-transition: opacity 1s; -moz-transition: opacity 1s; transition: opacity 1s; } #slideshow .c_slider { position: absolute; left:0; top:0; width: 400%; height: 310px; background: url(img/dummy-640x310-1.jpg) 0 0 no-repeat, url(img/dummy-640x310-2.jpg) 640px 0 no-repeat, url(img/dummy-640x310-3.jpg) 1280px 0 no-repeat, url(img/dummy-640x310-4.jpg) 1920px 0 no-repeat; } .sl_i:target ~ #slideshow .c_slider { -webkit-transition: background 1s; -moz-transition: background 1s; transition: background 1s; } /* need stop ! */ /* actions when target ! */ .sl_command { display: none; } .sl_command:target ~ #slideshow .slider, .sl_command:target ~ #slideshow figure:after, .sl_command:target ~ #slideshow figcaption, .sl_command:target ~ #slideshow #timeline, .sl_command:target ~ #slideshow .dots_commands li:first-child a:after { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; animation-play-state: paused; } #sl_play:target ~ #slideshow .slider, #sl_play:target ~ #slideshow figure:after, #sl_play:target ~ #slideshow figcaption, #sl_play:target ~ #slideshow #timeline, #sl_play:target ~ #slideshow .dots_commands li:first-child a:after { -webkit-animation-play-state: running; -moz-animation-play-state: running; animation-play-state: running; } .sl_command:target ~ #slideshow .pause { opacity:0; } .sl_command:target ~ #slideshow .play { opacity:1; right: 25px; cursor: pointer; } #sl_play:target ~ #slideshow .pause { opacity:0; } #sl_play:target ~ #slideshow .play { opacity:0; right: 55px; cursor: default;} .sl_i:target ~ #slideshow .slider { visibility: hidden } .sl_i:target ~ #slideshow .slider figcaption { visibility: hidden } .sl_i:target ~ #slideshow .dots_commands li:first-child a:after { display:none; } .sl_i:target ~ #slideshow .dots_commands li:first-child a:before { display:block; }} #sl_i1:target ~ #slideshow .commands { display: none; } #sl_i1:target ~ #slideshow .commands1 { display: block; } #sl_i1:target ~ #slideshow .c_slider { background-position: 0 0, 640px 0, 1280px 0, 1920px 0; } #sl_i1:target ~ #slideshow .dots_commands li:first-child a:before { left:0; } #sl_i2:target ~ #slideshow .commands { display: none; } #sl_i2:target ~ #slideshow .commands2 { display: block; } #sl_i2:target ~ #slideshow .c_slider { background-position: -640px 0, 0 0, 640px 0, 1280px 0; } #sl_i2:target ~ #slideshow .dots_commands li:first-child a:before { left:18px; } #sl_i3:target ~ #slideshow .commands { display: none; } #sl_i3:target ~ #slideshow .commands3 { display: block; } #sl_i3:target ~ #slideshow .c_slider { background-position: -1280px 0, -640px 0, 0 0, 640px 0; } #sl_i3:target ~ #slideshow .dots_commands li:first-child a:before { left:36px; } #sl_i4:target ~ #slideshow .commands { display: none; } #sl_i4:target ~ #slideshow .commands4 { display: block; } #sl_i4:target ~ #slideshow .c_slider { background-position: -1920px 0, -1280px 0, -640px 0, 0 0; } #sl_i4:target ~ #slideshow .dots_commands li:first-child a:before { left:54px; } the combinations of selectors couldn't understand previous stylesheet lies on rule :
#slideshow:hover .pause, #sl_play:target ~ #slideshow:hover .pause, .play_commands:focus { opacity: 1; } does first combination
#slideshow:hover .pausetranslate "select elements class name pause descendants of element id of slideshow"?what
#sl_play:target ~ #slideshow:hover .pauseindicate?
------------------edit after brian stephens answer----------------------
for question 2) still can't understand meaning of hover state must preceded id :target pseudo class, in general in css precedence elements disposition in code in case looks it's events rather : mean hyperlink targeting #sl_play must activated first , hover should occur on #slideshow rule valid ? if precedence events precedence in code won't matter anymore ?
question #1: first combination #slideshow:hover .pause translate "select elements class name pause descendants of element id of slideshow"?
answer: yes, it's descendant selector, doesn't specify has child; further down. keep in mind, specifies hover state.
question #2: #sl_play:target ~ #slideshow:hover .pause indicate?
answer: uses general sibling connector. #slideshow:hover must preceded #sl_play:target, not immediately. must later sibling.
here's article explaining variations of child , sibling selectors: css tricks
Comments
Post a Comment