I found that “:hover” is unpredictable in iPhone/iPad Safari. Sometimes tap on element make that element “:hover”, while sometimes it drifts to other elements. For the time being, I just have a “no-touch” class at body. <body class=”yui3-skin-sam no-touch”> … </body> And have all CSS rules with “:hover” below “.no-touch”: .no-touch my:hover{ color: red; } … Read more
use nth-child(item number) EX <div class=”parent_class”> <div class=”myclass”>my text1</div> some other code+containers… <div class=”myclass”>my text2</div> some other code+containers… <div class=”myclass”>my text3</div> some other code+containers… </div> .parent_class:nth-child(1) { }; .parent_class:nth-child(2) { }; .parent_class:nth-child(3) { }; OR :nth-of-type(item number) same your code .myclass:nth-of-type(1) { }; .myclass:nth-of-type(2) { }; .myclass:nth-of-type(3) { };
<body ontouchstart=””> … </body> Applied just once, as opposed to every button element seemed to fix all buttons on the page. Alternatively you could use this small JS library called ‘Fastclick’. It speed up click events on touch devices and takes care of this issue too.
the :checked pseudo-class initially applies to such elements that have the HTML4 selected and checked attributes Source: w3.org So, this CSS works, although styling the color is not possible in every browser: option:checked { color: red; } An example of this in action, hiding the currently selected item from the drop down list. option:checked { … Read more
The CSS 3 selector recommendation is pretty clear about both, but I’ll try to show the differences anyway. Pseudo-classes Official description The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors. A pseudo-class always consists of a … Read more
Yes, use :not(:hover) .child:not(:hover){ opacity: 0.3; } .child { display: inline-block; background: #000; border: 1px solid #fff; width: 50px; height: 50px; transition: 0.4s; } .child:not(:hover) { opacity: 0.3; } <div class=”parent”> <div class=”child”></div> <div class=”child”></div> <div class=”child”></div> <div class=”child”></div> <div class=”child”></div> </div> Another example; I think you want to: “when one is hovered, dim all … Read more
Is it literally just the second line you want to indent, or is it from the second line (ie. a hanging indent)? If it is the latter, something along the lines of this JSFiddle would be appropriate. div { padding-left: 1.5em; text-indent:-1.5em; } span { padding-left: 1.5em; text-indent:-1.5em; } <div>Lorem ipsum dolor sit amet, consectetuer … Read more
:unchecked is not defined in the Selectors or CSS UI level 3 specs, nor has it appeared in level 4 of Selectors. In fact, the quote from W3C is taken from the Selectors 4 spec. Since Selectors 4 recommends using :not(:checked), it’s safe to assume that there is no corresponding :unchecked pseudo. Browser support for … Read more
It’s pseudo-class vs pseudo-element distinction. Except for ::first-line, ::first-letter, ::before and ::after (which have been around a little while and can be used with single colons if you require IE8 support), pseudo-elements require double colons. Pseudo-classes select actual elements themselves, you can use :first-child or :nth-of-type(n) for selecting the first or specific <p>‘s in a … Read more
:focus and :active are two different states. :focus represents the state when the element is currently selected to receive input and :active represents the state when the element is currently being activated by the user. For example let’s say we have a <button>. The <button> will not have any state to begin with. It just … Read more