Css3 Selector That Works Like Jquery's .click()?

I've been using a pure CSS navigation for a few years now, and lately we've started building a bunch of mobile sites at the company I work for. I'd really like to keep using pure C

Solution 1:

You could use the :target selector for some basic functionality. See Chris Coyier's post about it. Note, brower support.

EDIT: Made a quick demo

Solution 2:

Given some basic HTML structures, you can recreate the toggle (show/hide) capacities of JavaScript implementations:

Using :target:

HTML:

<navid="nav"><h2>This would be the 'navigation' element.</h2></nav><ahref="#nav">show navigation</a><ahref="#">hide navigation</a>

CSS:

nav {
    height: 0;
    overflow: hidden;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
nav:target {
    height: 4em;
    color: #000;
    background-color: #ffa;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

JS Fiddle demo.

Using :checked:

HTML:

<inputtype="checkbox"id="switch" /><nav><h2>This would be the 'navigation' element.</h2></nav><labelfor="switch">Toggle navigation</label>

CSS:

#switch {
    display: none;
}
#switch + nav {
    height: 0;
    overflow: hidden;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
#switch:checked + nav {
    height: 4em;
    color: #000;
    background-color: #ffa;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

label {
    cursor: pointer;
}

JS Fiddle demo.

Unfortunately the closest alternative native CSS has, to a ':clicked' selector is the :active or :focus pseudo-classes, the first selector of which will cease to match once the mouse-button is released, the second of which will cease to match once the given element is no longer focused (by either keyboard or mouse focusing elsewhere in the document).

Updated the demos, to allow for toggling the text of the label (using CSS generated content):

#switch {
    display: none;
}
#switch + nav {
    height: 0;
    overflow: hidden;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
#switch:checked + nav {
    height: 4em;
    color: #000;
    background-color: #ffa;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}

label {
    display: inline-block;
    cursor: pointer;
}

#switch ~ label::before {
    content: 'Show ';
}

#switch:checked ~ label::before {
    content: 'Hide ';
}

JS Fiddle demo.

References:

• :checked (compatibility).
• :target (compatibility).

Solution 3:

Try the :active psuedo-class. It's not completely bulletproof, but you should be able to get at least some basic functionality from it.

Solution 4:

Try something like this in your CSS Code...

  selector:hover, selector:active {
     display:block;
     height:100px;//testwidth:200px; //testborder:solid 1px#000; //test
    }