pseudo-class

Is it ok to use multiple pseudo-elements in css?

由 大城市里の小女人 提交于 2019-12-04 22:42:23
I want to make a menu where each item is separated with a ·. To achieve this I use menu li:before { content: "· "; } This is swell, but it generates a dot before the first item as well. Therefore, i would like to use :first-child pseudo-class as well. Can I do this? Sure you can - http://jsfiddle.net/WQBxk/ p:before { content: "BEFORE "; display: block; } p:first-child:before { content: "1ST"; display: block } ​ The bad - it won't work in IE7 and below. Not because of the multiple pseudo selectors, but because of non-supported :before - http://kimblim.dk/css-tests/selectors/ Just tested in IE8

Insert special character using :before pseudo class in css

由 有些话、适合烂在心里 提交于 2019-12-04 22:15:57
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 :before pseudo class. By the way, my doctype is: <!doctype html> <html lang="en"> Try specifying <meta

Can a CSS pseudo-class be namespaced?

由 夙愿已清 提交于 2019-12-04 14:42:50
When using namespaces in CSS, you can select, for example, any div element in "any or no namespace" by using a namespaced type selector: *|div Is it valid CSS to namespace a pseudo-class? For example: *|:first-child It seems to work in WebKit based browsers, and it seems to not work in IE9 (below IE9 does not support namespaces at all) and Firefox. I don't care what browsers it does/doesn't work in, I just need to know whether it is a valid construct. Here's a fiddle . From what I can make out in the CSS grammar , it is not valid. But I may be misreading the grammar. Namespaces, as part of the

css apply styling to all elements except those in the last row

由 夙愿已清 提交于 2019-12-04 14:09:43
I have a product category page with 3 products per row. I want every row to have a border bottom except for the last row. This should have no border bottom. The last row may contain 1, 2, or 3 <li> elements. The current code that I'm using applies the border-bottom property to every 3rd <li> element, which is not quite what I want. CSS: .products li { width: 33.33333%; } .products li:nth-child(3n){ border-bottom: 1px rgba(51, 51, 51, 0.1) solid; } .products li:nth-child(2-PREVIOUS-SIBLING-ELEMENTS){ border-bottom: 1px rgba(51, 51, 51, 0.1) solid; } HTML: <ul class="products"> <li>Product</li>

How do I customize Angular Material's input/md-input-container component?

由 本秂侑毒 提交于 2019-12-04 09:04:10
问题 As stated in the title, how do I customize these elements? It seems they are using transparent background which is very difficult to view on most background palettes 回答1: Add one blank css file after "angular-material.css" and inside that blank css file overwrite the rules you want to customize. For the problem you are facing I added the following rules in my custom.css. md-input-container.md-default-theme label, md-input-container.md-default-theme .md-placeholder{ color:grey !important; }

How to detect if browser support specified css pseudo-class?

由 允我心安 提交于 2019-12-04 06:25:46
What's concept of detecting support of any css pseudo-class in browser through JavaScript? Exactly, I want to check if user's browser supports :checked pseudo-class or not, because I've made some CSS-popups with checkboxes and needs to do fallbacks for old browsers. ANSWER: I'm found already implemented method of testing css selectors in a Modernizr "Additional Tests" . You can simply check if your style with pseudo-class was applied. Something like this: http://jsfiddle.net/qPmT2/1/ stylesheet.insertRule(rule, index) method will throw error if the rule is invalid. so we can use it. var

Why checked property in css is not working in IE-7?

由 微笑、不失礼 提交于 2019-12-04 06:02:04
问题 I am using some thing like this in css input[type=radio]:checked + label { color:#121212 } the problem is this the checked property is not working in Internet-Explorer-8 and 7. ifI use like this input[type=radio] + label { color:$888888 } its working properly Please tell me alternate of this 回答1: You can use http://selectivizr.com/ JS. It's support css3 selector in older version of IE. 回答2: The pseudo-class :checked is not supported in IE 7. http://reference.sitepoint.com/css/pseudoclass

Is there a css pseudo selector for overflow?

由 感情迁移 提交于 2019-12-03 22:18:24
I'm trying to alter the style of something based on wether or not its parent div is being overflown. .pDiv { display: block; width: 300px; height: 100px; border: 1px solid rgb(0,0,0); } .cDiv { display: block; padding 4px; border-bottom: 1px solid rgb(0,0,0); .pDiv:overflow .cDiv { border-bottom: none; } <div class="pDiv"><div class="cDiv">child 1</div><div class="cDiv">child 2</div><div class="cDiv">child 3</div><div class="cDiv">child 4</div><div class="cDiv">child 5</div></div> is it possible to do something like this? I would use the last-child pseudo-selector, but the number of children

Is there a CSS “:drop-hover” pseudo-class?

由 放肆的年华 提交于 2019-12-03 22:14:47
Saying I have an input type="file" field. One can drop a file on this input (like in Firefox) instead of clicking "browse" and selecting the file. Now, I want to customize it a bit, by changing the field's background color when one is about to drop a file in the input . I cannot really use :hover since it matches even when you're not drag&dropping. Is there a CSS (pseudo-class) to do that? And is there a CSS way to style different if the file being dropped is not accepted and if it is? Say, if the field accepts only PNG files using accept attributes, I would make the field green if you're

Transition only for the border on hover, but not for background

由 我只是一个虾纸丫 提交于 2019-12-03 16:26:59
问题 Here I have some CSS: #image-edges-beneath:hover{ background-color: blue; } #image-edges:hover{ background-color: blue; } #image-edges-beneat:hover:after{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; border: 2px solid #F1FD6D; } #image-edges:hover:after{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s
订阅 pseudo-class