Search code examples
htmlcssstylesheet

css3 and slide show, required explanation about the syntax

I was trying to find slide show for some time and i am happy that I found it. But I am looking for explanation. There are so many things that are not making any sense. Especially the syntax. lines like this

 #slideshow-wrap input[type=radio]#button-1:checked~#slideshow-inner>ul { left: 0 }

YOU CAN FIND IT ON JSFIDDLE THE URL IS THIS

  http://jsfiddle.net/6ht9c2x0/
Solution

  • In general, what’s happening here is that hidden radio buttons are used to manage the state of the slideshow. In many cases, people use JavaScript to accomplish this. Here it’s solved quite elegantly by using the DOM tree to store the current state.

    You may have noticed that the radio buttons aren’t even visible. This is for a good reason as they cannot be skinned freely using CSS. That’s why they are mapped to the labels using the for attribute. That makes the radio buttons change their values when the corresponding labels are clicked.

    Regarding the line you quoted, here’s a detailed explanation:

    (from right to left)

    1. The left property is set to 0
    2. This affects an ul element
    3. This ul element needs to be the immediate child of the element with the ID slideshow-inner (> is the immediate child selector)
    4. #slideshow-inner needs to appear somewhere after the element with the ID button-1 (# selects an ID, the ~ is the general sibling combinator)
    5. The status of the #button-1 element needs to be checked (the colon selects a pseudo-class)
    6. The #button-1 element needs to have a type attribute with the value radio (the square brackets select the attribute, a value can be select by appending it using the = character)
    7. The #button-1 element needs to be an input element
    8. The #button-1 element needs to be a child of the element with the ID #slideshow-wrap (using a space means that it can be any child, not only the immediate children)