pseudo-class

Is it possible using current browsers to use pseudo-classes to detect first and last of a certain class?

由 ♀尐吖头ヾ 提交于 2019-11-28 02:06:59
If you have the HTML: <section class="column"> <p> Some Test </p> <p> Some Test </p> <p> Some Test </p> </section> <section class="column"> <p> Some More Test </p> <p> Some More Test </p> <p> Some More Test </p> </section> <section class="someotherclass"> <p> Some More Test </p> <p> Some More Test </p> <p> Some More Test </p> </section> and CSS: .column:last-child { background:red; } http://jsfiddle.net/WYu24/ Is there a way to make the :last-child selector pick up the last occurrence of a class? BoltClock Currently there is no shortcut syntax or pseudo-class in CSS for finding the first or

Clicking a child doesn't trigger the parent's :active state in IE

由 主宰稳场 提交于 2019-11-27 23:37:56
问题 I have found an irritating bug in IE 8-10 that prevents a parent's active state being triggered. It appears that if a child of the parent element is the target of the click event the active state on the parent element is not triggered. Here is a working example. If you click the text inside the <li> the element wont change colour. If you click inside an <li> anywhere other than on the <p> child the element will turn blue. This is a problem as it pretty much renders the css :active pseudo

CSS :focus not working

由 主宰稳场 提交于 2019-11-27 18:34:24
问题 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; }

How to make a hover effect for pseudo elements?

由 社会主义新天地 提交于 2019-11-27 18:31:04
I have a this setup: <div id="button">Button</div> and this for CSS: #button { color: #fff; display: block; height: 25px; margin: 0 10px; padding: 10px; text-indent: 20px; width: 12%; } #button:before { background-color: blue; content: ""; display: block; height: 25px; width: 25px; } Is there a way to give the pseudo element a hover effect such as #button:before:hover {...} and is it also possible to get the pseudo element to hover in response to another element being hovered like so: #button:hover #button:before {...} ? CSS only would be nice, but also jQuery is fine too. James Montagne You

Applying text-decoration on css generated content in IE

由 喜欢而已 提交于 2019-11-27 18:19:19
问题 It seems IE doesn't care for text-decoration: none; defined for a:before pseudo element (or pseudo class). Here is a JS Fiddle: http://jsfiddle.net/9N35f/ I'd expect the ">" to lose the underline. It does in FF, Chrome and Safari, but not in IE. Tested with IE10 and IE9. The question: Any workarounds that I could try to make the :before element lose the underline? Ideally in IE9+ Is there a bug report for this somewhere? Or is it actually by the standards? 回答1: IE seems to be in error here,

Why do anchor pseudo-classes a:link, :visited, :hover, :active need to be in correct order? [duplicate]

由 不羁的心 提交于 2019-11-27 13:06:31
问题 This question already has an answer here: Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS? 3 answers According to W3 Schools the order that the pseudo classes on the anchor element are declared is vitally important. Why is this? Are there any others? 回答1: There is a detailed description here: http://meyerweb.com/eric/css/link-specificity.html It is related to CSS specificity. Citing from there: All of them can apply to a hyperlink, and in some

:after vs. ::after

由 眉间皱痕 提交于 2019-11-27 09:10:11
问题 Is there any functional difference between the CSS 2.1 :after and the CSS 3 ::after pseudo-selectors (other than ::after not being supported in older browsers)? Is there any practical reason to use the newer specification? 回答1: 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

What happens when the browser doesn't support a CSS pseudo-class?

由 血红的双手。 提交于 2019-11-27 08:18:57
问题 What happens if a browser doesn't support a CSS pseudo-class, like :dir ? For instance: html:dir(rtl) { color: red; } Would browsers just ignore this rule if they don't understand the :dir pseudo-class? I'm more interested in the general case then in this particular pseudo-class. My intuition tells me yes, but I haven't found documentation confirming my intuition. This question is different from this one: Invalid CSS selector causes rule to be dropped: What is the rationale? . It is more

Style the nth letter in a span using CSS

由 ぃ、小莉子 提交于 2019-11-27 07:42:22
问题 I have: <span id="string">12h12m12s</span> and I'm looking to make the h , m and s smaller than the rest of the text. I've heard of the nth-letter pseudo element in css, but it doesn't seem to be working: #string:nth-letter(3), #string:nth-letter(6), #string:nth-letter(9) { font-size: 2em; } I know I could use javascript to parse the string and replace the letter with surrounding span tags and style the tags. However, the string is updated every second and it seems parsing that often would be

using :focus pseudo class on li or other element else than a,input,button, etc

由 那年仲夏 提交于 2019-11-27 07:39:44
问题 Is it possible to select an element that is focused, like a:focus or input:focus, but on the other element, such as div, li, span or else? If it's not possible, how can it be substituted with a tag? I am trying to modify height of a li element when it's focused, tried with a, but the height won't change. Requested Info : "Can you also explain how do you put focus on LI?" Via css selector li:focus . See https://jsfiddle.net/s4nji/Rjqy5/. 回答1: That's simple: just add a tabindex attribute to the
订阅 pseudo-class