pseudo-class | 易学教程

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

阅读更多关于 Is it possible using current browsers to use pseudo-classes to detect first and last of a certain class?

问题 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

:before psuedo element not working on h1 tag

阅读更多关于 :before psuedo element not working on h1 tag

问题 I cannot get the :before pseudo class to insert an icon font before a div containing H1 tags. All the examples I see online use a p or i to insert, however I want to use H1 tags because each tag will have a separate ID and class that correspond to some animate.css fade and delay effect. For simplicity sake I have replaced the font icon with a hash symbol in the example below. The idea is the icon-font will appear before the div, not each h1 tag (this I can do) - in other words; four lines of

html label:after content needs to have different colors in the text

阅读更多关于 html label:after content needs to have different colors in the text

问题 I have the display name of my model properties set, but I need them to display with a colon if they're not required and a colon and a red asterisk if they are. I didn't want to add the colon to the display name since I don't want the colon to appear in error messages and I may want to display them somewhere without it. I used the following style in my HTML file for adding the colon: .my-label > label:after { content: ": "; } However I can't figure out how to get a red asterisk to display

Add pseudo class to nth-child with CSS

阅读更多关于 Add pseudo class to nth-child with CSS

问题 I want to use hover so that the bottom border on odd divs is a different color from #75dcff . However, .card:hover div:nth-child(odd) does not work. Can I apply psuedo classes to nth-child elements? .card { margin: 30px; padding: 20px 40px 40px; max-width: 500px; text-align: left; background: #fff; border-bottom: 4px solid #ccc; border-radius: 6px; } .card:hover { border-color: #75dcff; } .card:hover div:nth-child(odd) { border-color: #ff7c5e; } <div class="card"></div> <div class="card"><

display first of class type

阅读更多关于 display first of class type

问题 I have a list of items, each with a class and the class are repeated throughout. I want to only show the first instance of each class. Is that possible with just CSS? <ul> <li class="red">red</li> <li class="red">red</li> <li class="blue">blue</li> <li class="blue">blue</li> <li class="yellow">yellow</li> <li class="red">red</li> <li class="yellow">yellow</li> </ul> ul li {display:none} ul li .red:first-child, ul li .blue:first-child, ul li .yellow:first-child { display:block} So in the above

Using :nth-child and :nth-last-child simultaneously

阅读更多关于 Using :nth-child and :nth-last-child simultaneously

问题 I can't make :nth-child and :nth-last-child pseudo-classes work simultaneously. Works well (highlights first 3 elements): #a li:nth-child(-n+3) { background: #fbfcc8; } Works well (highlights last 3 elements): #b li:nth-last-child(-n+3) { background: #fbfcc8; } Doesn't work (highlights first 3 elements and last one): #c li:nth-child(-n+3), #c li:nth-last-child(-n+3) { background: #fbfcc8; } http://jsfiddle.net/8GSQ6/2/ Update : In real I have more complicated HTML, so seems like it's just a

Why does CSS not allow me to nest selector blocks? [closed]

阅读更多关于 Why does CSS not allow me to nest selector blocks? [closed]

问题 It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 8 years ago . I'm just trying to create another dropdown menu effect within a dropdown menu. Observe: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="javascript/class-lib.js"></script> <script type="text

Zebra-striping nested lists with CSS

阅读更多关于 Zebra-striping nested lists with CSS

问题 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 回答1: Short answer, no. Long answer, yes, by targeting the nested items, eg: li:nth-child(odd) {background:blue

Why CSS :not pseudo-class doesn't work as expected?

阅读更多关于 Why CSS :not pseudo-class doesn't work as expected?

问题 Consider the following HTML: <div class="a"> <div class="b">Hello</div> </div> <div class="c"> <div class="b">World</div> </div> Adding the following CSS colors only "World" in red, as expected: .c .b { color: red; } But, adding the following CSS instead colors both "Hello" and "World" in red: :not(.a) .b { color: red; } Why? 回答1: You need to give it like this:- Demo div:not(.a) .b { color: red; } Pseudo-class :not Syntax is selector:not(){ properties } 回答2: Since the :not pseudo-class

What does “pseudo” mean in CSS? [duplicate]

阅读更多关于 What does “pseudo” mean in CSS? [duplicate]

问题 This question already has an answer here : What is it in a pseudo-element that makes the pseudo-element pseudo? (1 answer) Closed 2 years ago . When I read about CSS and HTML I cross the word pseudo-elements. I haven't found a good short explanation for what pseudo means. Could someone please explain this to me? 回答1: Supposed or purporting to be but not really so; false; not genuine: — https://en.oxforddictionaries.com/definition/pseudo- A pseudo-element is something that acts like an element