I have a number of elements with specific css class on the page (let's say item). Is it possible to apply a css style on the (N-1)th .item? For example it there are 9 elements then I need to style 8th.
I know about :nth-last-child(2). But it doesn't work in my case. It searches for CHILD elements but in my case elments are distributed between different parents.
jsFiddle of what I need
use the child combinator selector (>) with body along with #Zenith's solution
body > :nth-last-child(2)
http://jsfiddle.net/fWRw8/2/
Yes, you can use the :nth-last-child(2) selector to get the second-last element.
Here's a jsFiddle example.
This isn't supported in older versions of IE, so here's a link to a quick hack which will get it working there too.
Edit: In regard to your specific use case, sadly it looks like there isn't any real solution using just CSS. My initial thoughts were :nth-last-of-type but as you're basing it on a class and with different parents that won't work. :nth-last-child is also based on the parent so that won't help either. Sadly, there is no class-related selectors similar to these either so I'm afraid to say you may have to do it via. jQuery.
Related
I am taking practice test for Microsoft 70-480. I came across the question in the image. To select attributes that end in specific given value should be a css attribute selector such as [attribute$='value']. I don't understand how we make that selection with a css pseudo-element. Can some one explain to me why
As you've correctly stated, you need an attribute selector for this (although you would need to use [attribute*=value] instead), and you can't match elements using pseudo-element selectors (that's why they're called pseudo-elements!).
The only explanation for the "correct answer" here being option C is that whoever wrote that test either made a mistake with the options, or doesn't understand CSS selectors. Hopefully the former.
Is it possible to do something like this in CSS (3 included) ?
ul li:visible:nth-child(odd) {...}
This is not possible purely with CSS. You CAN chain pseudo classes such as li:nth-child(2n):hover but :visible is jQuery, not CSS.
CSS has no similar functionality as CSS cannot currently determine if an element is visible or not
I agree with Andy
But it will not select 1st element so add +1 and the code will li:nth-child(2n+1):hover. For other things refer Andy's answer
According to mdn :
The descendant selector is the most expensive selector in CSS. It is
dreadfully expensive—especially if the selector is in the Tag or
Universal Category.
When Modernizr is up , it adds all the non supported classes to the html tag.
Meaning he can later do :
.myNotSupportedClass .myLastDiv <-- notice descendants selecotr[ ]
{
color:red;
}
But this is absolutely slow operation an operation which can be optimized.... which has to go through all the DOM tree in order to find the div.
I know there isn't another way of doing it , but still :
1) they could have added those classes to the body/form which is closer to the elements. soo there will be less of searching.
Or am I wrong ...,?
But this is absolutely slow operation
Eh.
they could have added those classes to the body/form which is closer to the elements. soo there will be less of searching.
body: how much less searching? 1 level less? How much of a difference does that make?
form: not every page has a form, and pages can have more than one form. The form element itself can be placed anywhere in the page body too, so the elements that should be affected by selectors in Modernizr class context may very well be unrelated to it, making searching completely impossible.
Do whatever you like, but since Modernizr chooses to place classes on the html element, write contextual selectors that make use of those classes and the descendant selector. If you're that obsessive about descendant selector performance, you have the choice not to use Modernizr and lose all the feature detection goodness it brings.
Why it chooses to place classes on the html element is anybody's guess. It could have been the most convenient element to place them on.
In css, I have seen both div.selector and selector being used to define styling rules for a specific selector.
What's the difference between the two and what are the reasons I should consider when adopting one over the other when writing my own css files?
div.selector targets only div elements with a class of selector.
.selector targets ALL elements with a class of .selector not just DIVs
So prefix element with tag name if you KNOW that's the one you will be applying css to. The later approach is more generic and targets all elements with specified class. However, you should be specific whenever you can.
If you know only div elements will have .selector class, going specific is better in terms of performance eg div.selector rather than .selector which will look for all elements on the page but will eventually apply those styles to DIVs only.
div.selector is a more specific selector than .selector.
For example of you have this HTML:
Link
<div class="selector"></div>
The selector div.selector only matches the div where .selector selects both elements.
As mentioned so far, prefixing your class with its element name (ie: div.selector) will select only elements which are divs, but exclude anything else. With this in mind you can create classes which can be applied to multiple elements and/or target a single element.
In terms of readability, prefixing your classes can help you and your team identify what the element is from within the css. However in terms of general best practise and performance it is commonly advised that you try to refrain from prefixing your class and id declarations as it causes additional work for your users' browser engine.
By prefixing your classes (ie: div#selector or div.selector) your browser has to locate the class and then identify whether it is of the div type). Whilst the time required to do this might be negligible, I feel it's still worth mentioning.
Below are a few helpful links on the matter of performance and practice:
https://developer.mozilla.org/en/Writing_Efficient_CSS and
http://css-tricks.com/efficiently-rendering-css/
I check this selector:
h3:nth-child(1):contains('a')
selector doesn't work?
I check this in firefinder and does return nothing (not info that there is zero elements)
Then check this:
h3:nth-child(1)
and it returns h3, so selector is almost good, but something with this(h3 has text 'a') text goes wrong.
:contains() is not was going to be a CSS3 selector (thanks T.J. Crowder for the link), but it didn't make it, most likely because the way it works tends to lead to severe performance and over-selection issues. For example, if an element E matches :contains() for a given string argument, then all of its ancestors would also match; using it with a universal selector would lead to unexpected results with certain style properties, on top of being slow for the browser.
There is no other CSS selector that serves a purpose like :contains(). So you'll have to find some other way, either by modifying your HTML or even by using jQuery's :contains(), to achieve the effect you want:
Select an h3 element
if it is the first child of its parent
and its text contains the letter 'a'.
For jQuery and Selenium RC users: :contains() is implemented in the Sizzle selector engine used by jQuery, which is also used in Selenium RC (but not Selenium WebDriver). It works as described in this decade-old revision of the CSS3 spec, but again, due to how the spec describes it, you need to use it with care or it may lead to unexpected selections.
On a final note, h3:nth-child(1) can be replaced with h3:first-child, which as a CSS2 selector has better browser support.
If you're trying to use :contains(a) to find an anchor tag (rather than the letter A), you could use:
h3:nth-child(1) a
or
h3:first-child a
The :contains() pseudo-class isn't in the CSS Spec and is not supported by either Firefox or Chrome.
You can find a couple of detailed discussion in:
selenium.common.exceptions.InvalidSelectorException with "span:contains('string')"
Finding link using text in CSS Selector is not working
Solution
As a solution you have to drop the contains() part and your effective locator will be:
h3:nth-child(1)
Further as #BoltClock mentioned within his answer, you can also use:
h3:first-child
As an alternative, you can also use:
h3:first-of-type
tl; dr
selenium.common.exceptions.InvalidSelectorException with "span:contains('string')"
Finding link using text in CSS Selector is not working