pseudo-class

CSS3 nth-of-type across the entire page?

由 南笙酒味 提交于 2019-12-08 21:50:49
问题 It seems to me that nth-of-type only works within the same parent element. Is there any way to get it work across the whole page? My situation: I would like to cycle through five hover colors for links. These links are scattered across many paragraphs. Since there are only one or two links per paragraph, the first couple of hover colors are disproportionately favored. Thanks! 回答1: nth-of-type always looks at the element's index relative to it's direct parent: (w3schools), so it won't work

Changing custom CSS attributes without Javascript?

由 拜拜、爱过 提交于 2019-12-08 11:01:48
问题 So I am doing some wiki editing, and sadly Javascript is not enabled. Therefore, I need help from the CSS guru's out there! I understand you can add a custom HTML attribute like this: <span id="some-id" custom_attr="no"></span> And you can style elements with custom_attr like this: span[custom_attrib] { /* styling here */ } Now, is there a way to edit the HTML attribute inside the CSS? Example (which does not work of course..): <!------------- CSS ------------> <style> .some-class { /*

Creating a responsive, fringed (repeating triangles) css border

由 大兔子大兔子 提交于 2019-12-07 22:26:03
问题 I've been working on a pattern for a while which calls for a fringed bottom border on a modal. The problem, is that depending on the viewport size, my current implementation cuts of one side, which is less than ideal. Here's where the inspiration came from, Google's Wallet app, which implements this via an :after pseudoclass, an image background and repeats. You can see that the edges are cut off: .receipt-main-section::after { background: url(data:image/png;base64

Is :hover:after supported in IE8?

由 谁说胖子不能爱 提交于 2019-12-07 16:10:30
问题 I have a flyout menu where at the end of "Quick Links" I use the :after pseudo-element on the first LI tag to display an icon from a sprite file. The HTML: <ul class="rs-quick-links-nav"> <li> <a href="#">QUICK LINKS</a> <ul> <li><a href="#">Enhanced Recipe Search</a></li> <li><a href="#">Recipe Collections & Favorites</a></li> <li><a href="#">Cooking Tips & Techniques</a></li> <li><a href="#">Shopping & Storing</a></li> <li><a href="#">Tools & Products</a></li> <li><a href="#">New Uses for

why “a:hover MUST come after a:link and a:visited（w3school）”？ [duplicate]

由 核能气质少年 提交于 2019-12-07 06:33:30
问题 This question already has answers here : Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS? (3 answers) Closed 3 years ago . I‘m study CSS in the "w3schools", in the chapter of "link", they say: "When setting the style for several link states, there are some order rules: a:hover MUST come after a:link and a:visited a:active MUST come after a:hover" I want to know why the correct order is L.V.H.A, not L.H.V.A or another. 回答1: Pseudo-classes must be

css pseudoclass:hover not working

由 匆匆过客 提交于 2019-12-07 04:46:46
问题 I am struggling to get a simplest css hover pseudoclass to work. Anybody knows why the following doesnt work? the css #hidden {display:none;} #show:hover #hidden{display:block;} the html <a href="#" id="show">show</a> <div id="hidden">here i am</div> I really feel stupid asking such a simple question, i did this a hunderd times, but cant figure out why this shouldnt work. 回答1: Try this #show:hover + #hidden{display:block;} :hover #hidden implies that #hidden is a child of the hover element.

CSS: a:link vs just a (without the :link part)

由 社会主义新天地 提交于 2019-12-06 18:20:57
问题 So we're required to use the following order for CSS anchor pseudo-classes a:link { color: red } a:visited { color: blue } a:hover { color: yellow } a:active { color: lime } But my question is why bother with the a:link part? Rather, is there any advantage to the above (other than perhaps clarity) over: a { color:red; } /* notice no :link part */ a:visited { color: blue; } etc.,etc. 回答1: :link selects unvisited links, that is: anchors with an href attribute which have not been visited by the

Insert special character using :before pseudo class in css

由 末鹿安然 提交于 2019-12-06 18:09:37
问题 I was toying around with the :before pseudo class in css, trying to insert a special character but the result is not what I was hoping for. Using: .read_more:before { content: "»"; margin-right: 6px; } I get the character I want, but with an  character before it and using: .read_more:before { content: "»"; margin-right: 6px; } I get the complete » on the html page. I can think of a couple of ways to solve my problem, but I was wondering what the correct syntax would be if I wanted to use the

Creating a responsive, fringed (repeating triangles) css border

由 为君一笑 提交于 2019-12-06 11:33:08
I've been working on a pattern for a while which calls for a fringed bottom border on a modal. The problem, is that depending on the viewport size, my current implementation cuts of one side, which is less than ideal. Here's where the inspiration came from, Google's Wallet app, which implements this via an :after pseudoclass, an image background and repeats. You can see that the edges are cut off: .receipt-main-section::after { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAkklEQ…MUwBTzA7EIEAtBFbEgK0JWDLKCA6oJqyIGqCAjVAMTuiIAuCdhjWF6oYAAAAAASUVORK5CYII=)

Zebra-striping nested lists with CSS

由 为君一笑 提交于 2019-12-06 09:21:54
It's easy to style lists and rows with alternating backgrounds using the the :nth-child(odd/even) pseudo-classes, but if you try to apply it to nested lists, it starts to look hideous. My question is, is there any way to alternate by depth / hierarchy, where, for example, a parent color alternates with the child elements' indefinitely. Eg: red blue blue red red blue red blue jsfiddle SpliFF Short answer, no. Long answer, yes, by targeting the nested items, eg: li:nth-child(odd) {background:blue} li:nth-child(odd) li:nth-child(even) {background:blue} li:nth-child(even) li:nth-child(odd)
订阅 pseudo-class