[EDIT 4/7/2014] Hey – I did figure it out. You can stop commenting me the answers now. KTHX. 😛
One of my Automattic colleagues turned me onto the site CSS Diner, which touts itself as “a little game to help you learn CSS selectors.”
It’s been great thusfar! While I’m pretty good with CSS, I’ve always struggled with the more advanced selectors and how to properly implement them. This little game, for me, has been fantastic in helping “stick” those rules in my head. Until I got to level 17, that is. The dreaded :last-child selector.
I was able to suss out how to select the apple on the fancy plate…but that goddamn pickle…
Now don’t mistake this as a “cry for help” because I do want to figure it out on my own. For me, that’s the best way to learn new things: you keep trying until you get it.
And in my case, it may involve some head-trauma as I bang my head on my desk in frustration. 😀
I’d love to hear your recommendations on more advanced CSS trainings! Free is even better.
This game is awesome, by the way. For future reference, here’s a handy list of some of the nuttier selectors. http://zombie.labnotes.org/selectors
All last-children of class small:
:last-child.small
Took me longer than I’d have liked to figure that one out.
I usually use syntax
.small:last-child
for stuff like this because usually you first target all “small” targets and then select only the last one as a special case. However, if you had some rules for all last childs and then want to special case the “small” case, using the syntax
:last-child.small
would make more sense.
I like the CSS Diner, but I wish it would provide directions/feedback when I’m wrong or more helpful tips in learning.
Blooming CSS & CSS Diner…I can’t get the right selector for so I’m stuck on the first task! Ninja..no way…. I agree with Brett in that I could do with some better hints!
Hi Carolyn,
I struggled with this myself today (admittedly 18-months after yourself… lol) and am still confused!! Hoping you may give me a helpful explanation as it is difficult finding an explanation anywhere on this very specific issue of using the last-child in this way.
As I understand it: this ‘:last-child.small’ selector will select any element which is the last-child of it’s parent element BUT only if it also has the class of (in this instance:) “small”. So it HAS to be the last-child and also HAS to have the specified class.
So far, hopefully I am on the right course….
This is where I become a little stuck with understanding it. As I see it: the RHS of the image quite clearly shows a “small” orange on top of a normal orange on top of a plate – thus would surely as be the :last-child with a class of “small”? No?
However, when reading the HTML, the element is immediately followed by the small orange () and then normal . Thus the small orange is not (according to the code the last-child). By reading this code however, I would envisage by reading the way it is written that the plate should have the small orange on it first with the normal orange balancing on top of it.
Have they simply tried to make this particular small orange unselect-able and in doing so made it more confusing??? Or am I misinterpreting what this means?
Any feedback would be appreciated.
Your error was relying on the graphic – everything in CSS relies on the corresponding HTML. In this specific example, the small orange comes first in the HTML, thus it is not a `:last-child` with regards to the exercise.