Here is a tricky challenge for you guys, CSS selector to get the :last-child that doesn't have a class.
What I have tried so far:
.nav-item:not(.nav-item--mobile):last-child {...}
.nav-item:last-child:not(.nav-item--mobile) {...}
I have similar query selectors that do some fun stuff, so I'd rather try and do this via CSS. The mobile items can be variable in quantity.
// Get the first child in the list when there are n or more, and
// they are not mobile. Yes, this actually works.
.nav-item:first-child:nth-last-child(n+7):not(.nav-item--mobile)
The following will give me the last child in all cases, but I want the last child that isn't a mobile only child.
.navigation-item--top:last-child
Target
generic generic generic generic generic mobile mobile
^
target this one
HTML
<ul class="nav-items-list">
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item"></li>
<li class="nav-item nav-item--mobile"></li>
<li class="nav-item nav-item--mobile"></li>
</ul>
Yes I could figure out which is the correct one in the generated navigation, or I could find it with JS.
Unfortunately what you want cannot be achieved using CSS only.
:last-child asks only one question, no matter what else you specify: Am I the last child of my parent element?
Sadly, there is no :last-of-class, only :last-of-type, but this cares only about element type.
It is not even planned for selectors level 4 that you can specifiy a class or other limiting property.
See
https://www.w3.org/TR/selectors4/#the-last-child-pseudo
Related
Assume I have HTML code like this:
<ul class="my-list">
<li> One </li>
<li> Two </li>
<li> Three </li>
</ul>
If I wanted to style the <li> elements, I could use the following selector in CSS:
.my-list li {...}.
The .my-list class here ensures I won't change any <li> elements for other lists.
Is there any additional benefit or usefulness to adding the same class to each <li> element and simply using that as the selector instead, e.g:
<li class="my-list-item">
.my-list-item {...}
I don't think there is because at the end of the day, you are just selecting an element rather than a class or vice-versa.
Unless you are doing something to target specific elements in a list, then adding a class to the li's would be beneficial as then you can make all the .my-list-item red and the .my-list-item--blue blue for example
I could be completely wrong as there might be some more side effects that even I don't know as in it's quicker to select an element rather than a class but even if that is the case, you wouldn't notice anything.
I'm wondering if there is a pure CSS way to add a class to elements of another class. The problem I'm trying to solve is below, which is also an example.
Using bootstrap, I have a number of elements that look like this:
<li class="nav-item">
<a class="nav-link" href="#">Law</a>
</li>
What I would like to do is add the pull-right class to each element with the class nav-item (I think), in order to make the nav items all float to the right.
Is there a pure CSS way to do this? I think the answer is no, at least without LESS/SASS/JS, but I'd love to be disabused of that notion.
No, if you are wanting to add a class to the CSS you would need to use either JavaScript or Jquery. I would recommend Jquery because IMO it is a little easier to work with when adding classes.
Or you could just add the class to each nav-item:
<li class="nav-item pull-right">
Say I have the following DOM tree:
<div class="box">
<ul class="gallery">
<li id="1">text</li>
<li id="2">text</li>
<li id="3">text</li>
<li id="4">text</li>
<li id="5">text</li>
<li id="6">text</li>
<li id="7">text</li>
<li id="8">text</li>
<li id="9">text</li>
</ul>
<div id="random"></div>
<ul class="gallery">
<li id="10">text</li>
<li id="11">text</li>
<li id="12">text</li>
<li id="13">text</li>
<li id="14">text</li>
<li id="15">text</li>
<li id="16">text</li>
<li id="17">text</li>
<li id="18">text</li>
<li id="19">text</li>
<li id="20">text</li>
</ul>
</div>
I want to create a CSS selector that will pick every 6th <li> tag under the div with the class "box". But I need the selector to take into account the entire <li> tags in the page and not to count them per <ul> tag. So in the end, the selector should pick the <li> with IDs 6,12,18. Currently I was only able to create a selector that picks IDs 6 & 15 when I used:
div.box li:nth-of-type(6n)
Notice 1: the IDs numbers are only added for reference. In reality the <li> tags don't have a class or an ID.
Notice 2: the number of <li> tags in each <ul> tag varies from site section to site section. Sometimes there can be even a 3rd and a 4th </ul> with more <li> tags.
Notice 3: I don't have control over the hard-coded HTML, which means I cannot unify tags, add IDs or CSS classes, etc. The selector will be called from an external JS file. While I can edit the DOM with jQuery after the page loads, I prefer to avoid such a solution to make the selector easier to handle.
Thanks
Generally Agree Impossible, except...
I basically agree with Sych and FabrÃcio that it is not currently possible to do as a pure CSS solution. However, there are always some exceptions, depending on actual html structure.
In your case, there may be an exception, but it does depend on the full constraints of your situation.
When Would it Be Possible?
Based off your given code, if these two constraints are true, then you can still get what you want via CSS:
All ul items that are direct children of .box are of class .gallery.
All gallery groups (except perhaps the very last one) consist of exactly nine li elements (both groups in your example do, but I don't know if that was coincidence or how you are actually setting up your code).
If the above two factors in your html are true, then this code gets what you want (using color to show selection here):
ul.gallery:nth-of-type(2n+1) li:nth-of-type(6n) {
color: red;
}
ul.gallery:nth-of-type(2n+2) li:nth-of-type(6n+3) {
color: red;
}
You can see it works on the code you gave in this fiddle, then you can see it continues to work given an expansion of the html as this fiddle shows, even if the final list is short of nine as both this fiddle and this fiddle shows, but it will fail if the .gallery varies in length at some midpoint of the sequence, as seen in this fiddle (notice how the last two selected texts are not 6 apart from each other because the second to last .gallery has only 7 items).
The Overarching Principle
So in general, if your dynamic html is output in some type of a regular pattern as demonstrated here, then it can open up the possibility of a pure css solution along the lines of that given. It is when the dynamic generation is also fully random (so in your case if either #1 or #2 condition above is not guaranteed true) that a pure css solution is impossible.
CSS does not provide such scope, it only provides traversing "deeper in to the DOM" tree. It does not even have a parent element selector.
If you are in jQuery environment, you can write your own selector, call it, say, ":nth-from-top(n)" that will work using jQuery's DOM traversing functions.
Note, that this type of selector will be much slower, because it cannot take advantage of the performance boost provided by the native DOM methods.
nth-child and nth-of-type match based in the element's position relative to its siblings only.
As far as I know there's currently no CSS-only solution for that unless all lis had the same parent. You will have to add a class to every 6th element or use some JavaScript.
So, constraining the answer to CSS selectors only without altering the markup and without hardcoding the nth start indexes: impossible. I'd like to be proven wrong though.
Looking by the bright side, adding a class will provide better selector performance. nth-child is already considered inefficient, now if what you want would be possible it'd mean that browsers would be forced to recursively evaluate selectors and count matches each time the DOM is updated. Though this would be terrible performance wise, I believe it'd still be possible to implement through new "scoped" nth selectors a la CSS Counters. Just food for thought.
So I'm using menu_attributes (http://drupal.org/project/menu_attributes) to add specific classes to my menu items.
A problem for me is that these are added to the link itself
<li class="leaf active menu-mlid-873><a class="customClass active" href="/">Home</a></li>
But I would like to somehow make it like this, so that the class is also used for the parent of the link
<li class="customClass leaf active menu-mlid-873><a class="customClass active" href="/">Home</a></li>
I tried using theme_menu_alter but can't seem to figure out how I can get the class from there too.
override the theme_menu_link function. http://api.drupal.org/api/drupal/includes!menu.inc/function/theme_menu_link/7
I have this:
<ol>
<li class="letter">
<li class="letter">
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
</ol>
I want the first 9 of the li elements not of class "letter" to be styled a certain way. So, my thinking is, I select those not of class "letter", then select using nth-of-type:
li:not(.letter):nth-of-type(-n+9):before { ... }
However, this selects the first 9 regardless of class, the same result I get using:
li:nth-child(-n+9):before { ... }
I see examples out there of selecting based on E:nth-of-type and .c:nth-of-type. How come it stops there? Why can't I build a selection using nth-of-type off a pseudo-class like I can off an element or class? (Or can I somehow?)
Because the word "type" in :nth-of-type() specifically refers to "element type", and nothing else.
Even examples that you see that qualify :nth-of-type() with a class selector are doing it wrong; they're really matching by the nth sibling of its element type, and not by its class. The class selector is there to say "only match this element if it has this class", and isn't actually considered when counting siblings. This is why you get the same result with both selectors in your example.
With the current Selectors specification, you're not able to select the nth sibling that matches a complex combination of selectors, so what you want to achieve is currently not possible with CSS without knowing about or having control over the HTML structure. Of course, if you know that only the first two li elements will ever have the class then you could just do
li:nth-child(n+2):nth-child(-n+9)::before { ... }
But that's not very useful if your HTML structure will vary.
There's an :nth-match() being proposed in Selectors 4 for this specific purpose, but no word on implementations yet. So for now, you're out of luck when it comes to pure CSS.