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 of determining the language of a given element when testing against the :lang() pseudo-class which may be defined by the document language and/or the implementation, whereas … Read more
Yes you can do it using :nth-child(n+4) In your case: @media(max-width:768px) { .list li:nth-child(n+4) { display:none; } } You can see this fiddle : http://jsfiddle.net/wgLCH/2/
One big difference: in CSS, a class has a lower importance level than an ID. Imagine that each specification in a CSS declaration added a certain number of points to that declaration’s value. Let’s say the points go something like this (totally made up, but whatever): Tag name (‘a’, ‘div’, ‘span’): 1 point Class name … Read more
A neat little trick You can achieve what you want by using a trick to check if the <section> element is the only element in <main>. This will not work, if there are any other elements there. In your case it should work like this (http://jsfiddle.net/Ljm323qb/2/): section { max-width: 500px; } /* The STAR of … Read more
:not(:has()) Note: Limited support for old browsers. The example below demonstrates the combination of the :not() and :has() pseudo-classes to select elements that do not have a specified child. div:not(:has(p)) { background: powderblue; } div:not(:has(p)):hover { color: blue; background: azure; } <div> <h1>Does Not Have a Paragraph</h1> </div> <div> <h1>Has a Paragraph</h1> <p>Paragraph</p> </div> As … Read more
One of the versions you posted actually works for all modern browsers (where CSS selectors level 3 are supported): div ul:not(:first-child) { background-color: #900; } If you need to support legacy browsers, or if you are hindered by the :not selector’s limitation (it only accepts a simple selector as an argument) then you can use … Read more
When the user clicks on a button, I hide few blocks by display:none, and the problem occurs. The nth-child selector also counts hidden elements. Is there way to ignore those specific blocks, so that again every row has different style? The problem is that the nth-child() selector looks at all siblings under the same parent … Read more
They cover completely different use cases. CSS namespaces are for applying CSS to XML documents that mix elements from different XML namespaces. e.g. so you can target <foo:p> and <bar:p> without confusion. SMACSS covers techniques for writing robust CSS that doesn’t interfere with other parts of the page. e.g. so that .title in your address … Read more
As for CSS 2.1, see http://www.w3.org/TR/CSS21/selector.html#attribute-selectors Executive summary: Attribute selectors may match in four ways: [att] Match when the element sets the “att” attribute, whatever the value of the attribute. [att=val] Match when the element’s “att” attribute value is exactly “val”. [att~=val] Match when the element’s “att” attribute value is a space-separated list of “words”, … Read more
$(“#wrapper input[type=button]”).click(function() { alert(“hi there”); });