pseudo-class

I tried using :focus CSS pseudo-class in my project. I want to change the color of the element where I click on it. Now when I click my element change color only where it is active and after mouse up it return to old color. After second click I want it back to old color. I'm using Chrome. Demo here .row { display: inline-block; border: 1px solid grey; height: 200px; width: 200px; line-height: 1em; background: grey; margin: 5px; opacity: 0.1; } .row:active, .row:focus { background: orange; } <div id="main" class="container"> <div class="row" id="row0"> </div> </div> If you want a real focus

I don't know if it's a part of any standard, but at least two major browsers have implemented it: :-webkit-any-link in Chrome :-moz-any-link in Firefox I can't find any documentation for it. I would like to know its purpose, browser support, and examples of usage. :any-link is a new pseudo-class proposed in Selectors level 4 , that matches all elements that would be matched by :link, :visited . From what I see, its main purpose is to simplify selectors that need to select any hyperlinks, since the naming of :link is misleading; it specifically means unvisited links only, rather than all

I am trying to hide the first 3 elements having the class .row inside the block .container . What I'm doing is hiding all the .row first, and then I am trying to display the first 3 .row by using .row:nth-child(-n+3) jsfiddle here: http://jsfiddle.net/z8fMr/1/ I have two problems here: Row 3 is not displayed, am I using nth-child in the wrong way? Is there a better practice than hiding everything and then creating a specific rule to display the n first elements that I want? Is there a way in css to just display the first 3 .row and then hide all the other .row ? Thanks. You have a .notarow as

I know there is an official CSS3 :checked pseudo-class, but is there an :unchecked pseudo-class, and do they have the same browser support? Sitepoint's reference doesn't mention one, however this whatwg spec (whatever that is) does. I know the same result can be achieved when the :checked and :not() pseudo-classes are combined, but i'm still curious: input[type="checkbox"]:not(:checked) { /* styles */ } Edit: The w3c recommends the same technique An unchecked checkbox can be selected by using the negation pseudo-class: :not(:checked) :unchecked is not defined in the Selectors or CSS UI level 3

What is the differences between a {...} and a:link{...} ? Are there different usages, and benefits between them? According to W3C a:link is for not visited, a:visited is for visited, and just a applies to both. a covers all the bases. a:link is used only if the link in un- visited , un- hover ed, and in- active . So, use a for things like font-family (if you want links to come up in a different font), then use link for the standard formatting, and visited , hover and active for 'special effects'. EDIT: After reading Sander's W3C link , I can see that I didn't have it quite right. a:link will

I want to apply some css for inputs elements and I want to do that only for inputs that are not disabled and are not submit type, below css is not working, maybe if someone can explain me how this must be added . input:not(disabled)not:[type="submit"]:focus{ box-shadow:0 0 2px 0 #0066FF; -webkit-box-shadow:0 0 4px 0 #66A3FF; } Instead of: input:not(disabled)not:[type="submit"]:focus {} Use: input:not([disabled]):not([type="submit"]):focus {} disabled is an attribute so it needs the brackets, and you seem to have mixed up/missing colons and parentheses on the :not() selector. Demo: http:/

Lately I've been working on Shower HTML5+CSS3 presentation template to make a upcoming presentation. Shower uses the CSS :target pseudo-class which makes it easy to identify the current slide in the overview of the slides. I understand how :target works through the hash in the URL, but however I cannot get it to clear the :target CSS from all elements at all. So my question is: given that after an element has been :target ed, how can we clear all the :target and revert it to the norm using JavaScript? The use of History API doesn't seem to work. I previously tried the following two statements