:focus:checked:disabledE + F | E ~ F selectorsLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
label and input together with CSS pseudo classes :focus, :checked or disabled and using E + F or E ~ F selectors you can create something like transmitter and reciever.input with type text can recieve :focus and with siblings selector you can style any sibling element. Or take input with type checkbox or radio which can be toggled with different state and recieve :checked pseudo class. All of these elements might be called recievers.reciever to get one or another state there needs to exist some kind of transmitter that would trigger those state changes. And for that purpose label is a perfect match because clicking on it either gives :focus to element or changes state with :checked. Since label element does not need to be sibling with it's recieving element it might be located almost anywhere in the DOM allowing distant control over elements. In addition there might also exist multiple transmitters to get greater control over elements.class names added on any div element:
main-title - used in first slide to display title of a slideshow
top-heading - used to display main title of the slide
text-information - used to add text paragraphs
content-list - used to "list" out items
author - used in the first slide to display author of the slides
three main parts: slides, navigation and slides counter.
Slides - are used to display any information that you want to present. They are information containers(obvious?!). Use slides markup inside to layout your information.
Navigation - is made of those little circle objects at the bottom of the page. It is used for fast jumping between any slide and keeping track of slideshow progress as you move on. Navigation uses transmitter pattern (which was described before) where radio buttons acts as recievers and slides are shown or hidden according to radio's state.
Slides counter - is made with a help of counter-increment and content: counter(NAME) css properties. Total amount of slides is shown by displaying last slide counter's value at all times. Current slide's number responds to active slide counter's value.
hover or something similar, then I came up with an idea to use inputs for storing active state (which I started calling transmitter pattern). Everything went quite well and I even started doing simple UI widgets like dropdown, tabs, accordion with only css.
adobe's blog page where some guy explained the very same technique in small details. Unfortunately I can not remmeber what was the name of blog post or who the person that posted was and I can not share link with you. :(
javascriptless.