pseudo-class

I want to select spans that are not the descendants of a specific class, let's call it "no". Here's my CSS: div:not(.no) span{background-color:#00f;} Here's the HTML <div> <span>yes 1</span> </div> <div class="no"> <span>no 1</span> </div> <div class="no"> <div> <span>no 2</span> </div> </div> Two questions: Why does my CSS apply to both yes 1 and no 2? Why does the whole thing break if I switch to a universal selector? *:not(.no) span{background-color:#00f;} Here's the code in JSFiddle: http://jsfiddle.net/stephaniehobson/JtNZm/ Both of the span elements' parent div elements don't have the

I'm trying to style a disabled input. I can use: .myInput[disabled] { } or .myInput:disabled { } Is the attribute selector the modern CSS3 way and the way to go forward? I used to use the pseudo-class, but I can't find any info on whether they are the old way and won't be supported or whether they're both equal and you can use whatever you like best. I have no need to support older browsers (it's an intranet application), so is it: attribute is newer and better pseudo-class is still the way to go whichever you like best there's a technical reason to use one over the other Is the attribute

The CSS language pseudo-class to allow us specify different styles for different languages, like so: html:lang(en) .foo { ... } However, this doesn't work in IE7, so I've been using an attribute selector: html[lang="en"] .foo { ... } They seem to do the same thing, but are there any subtle differences? And if not, why does CSS even have a language pseudo-class, when the attribute selector does the exact same thing? In HTML, both the :lang() pseudo-class and the attribute selector will match an element with the corresponding lang attribute. The difference is that a browser may have other ways

This question already has an answer here: Line before and after title over image [duplicate] 2 answers I am working on some CSS where the design calls for page titles (headings) to be centered with horizontal lines that are vertically centered on either side. Further, there is a background image on the page so the background of the title needs to be transparent. I have centered the title and I can use pseudo class to create the line. But I need the line disappear when it cross the text of the title. I considered using a background gradient that goes transparent where the words are, but since

How can I select a certain element in a list of elements? I have the following: <div class="myclass">my text1</div> <!-- some other code follows --> <div> <p>stuff</p> </div> <div> <p>more stuff</p> </div> <p> <span>Hello World</span> </p> <div class="myclass">my text2</div> <!-- some other code follows --> <div> <p>stuff</p> </div> <p> <span>Hello World</span> </p> <input type=""/> <div class="myclass">my text3</div> <!-- some other code follows --> <div> <p>stuff</p> </div> <footer>The end</footer> I have the CSS class div.myclass {doing things} that applies to all, obviously, but I also