:nth-child() Not Working


#1

https://www.codecademy.com/courses/web-beginner-en-GfjC6/0/3?curriculum_id=50a3fad8c7a770b5fd0007a1#

It says "Oops, try again. Did you target the 4th li child of the ordered list? Check the Hint if you need help." though I have completed the task and I re-checked it with the idea of one of the previous topic's solution. No idea what's wrong I am doing.


Replace this line with your code.


#2

We can't know what you are doing if we cannot see it. Post your code please.


#3

I have run into the same problem. I can make the 4th child disappear, and it STILL says my code is not good enough. I say the hint is not good enough. I made it disappear using the id ¨nonsense¨ in the HTML code:

                    <li>Inputs go between ()</li>
                    <li>Actions go between {}</li>
                    <h3 id=¨nonsense¨>
                    <li>jQuery is for chumps!</li>
                    </h3>
                </ol>
            </li>
            <li>Inputs are separated by commas.</li>
            <li>Inputs can include other functions!</l

The script.js tab looks like this:

// Write your jQuery code on line 3!
$(document).ready(function() {
var $target = $('h3');
$target.fadeOut('fast');
});

It won¬īt accept my answer. How do I use the :nth-child() to target the 4th child? If I enter a class or id to make the 4th child disappear, it should accept my answer. When somebody does not post their erroneous code, just reply to them with the correct code. That way, the rest of us will see the answer too.


#4

The above is invalid HTML. The only direct children a list can have are list items. Recommend Reset the exercise and turn your attention to the script. Leave the HTML as it is.

$(document).ready(function() {
    var $target = $('...');
    $target.fadeOut('fast');
});

The ... is the missing selector, which will be an :nth-child(). Now consider that there are both unordered and ordered lists in your page. We only wish to target the fourth child of the ordered list.

$('ol :nth-child(4)')

will target the element that is the fourth child of an ordered list. Note that the space is critical as it denotes descendancy.


#5

Thanks for the quick reply. I was able to make it work, even with the letters "li" after the space.


#6

It ups the specificity of the selector by 1 in the lowest column so not really of added importance. The only direct children an OL or UL can have is list items, LI so the plain selector :nth-child() is sufficient. Recall that the space refers to descendants.

parent descendant

The space is very critical in the declaration of this selector pattern. We can isolate the selector to only direct children with the > operator:

parent>descendant

which will not include grandchildren, etc.

CSS is a language that is not that difficult to learn and implement, but it has soooo many possibilities, some of which are bleeding edge and not fully supported. We need to get a solid foundation around CSS Levels 1 & 2 if we really want to excel at the craft of CSS Design. It's what makes CSS3 and beyond so useful. Just this one skill will take a creative person to great heights.

Concerning jQuery... As you are noticing, this library is heavily dependent upon CSS like selectors, which it uses to target DOM nodes on the fly. CSS that applies only gets parsed once into each node at load time, but with script we can modify the rules at will. (We're not altering the style sheet, but the actual nodes the original rules were written into.) This is very intensive because the page actually has to be redrawn though we only see the subtle changes.

The most useful exercise in both CSS and jQuery is DOM traversal. Hone that skill and your pages will be a lot freer of ID's and CLASSes. While essential in and of themselves, they are not always the best thing to reach for. If it is relatively easy to traverse, then that is the way to go, imho. Once the skill is acquired you will always have need of it and be a master of the craft while the minions are still messing with training wheels.

Key concepts to study and learn are the cascade, specificity and importance, and inheritance.

The cascade relates to the order in which the style sheet is parsed into memory. It goes in the order in which it loads. The selector rules that load last have the greatest importance, which means they can overrule selector rules targeting the same selector. As you will have already seen, inline style attributes are the most important since they are written right at element level and cannot be easily overridden.

Specificity relates to weighting of selectors. As noted above, style attributes have the highest specificity range, being in the left most column along with !important. The next highest is the ID which occupies the third column from the right, followed by classes and pseudo-classes, and lastly in the first column from the right (lowest), the elements and pseudo-elements. There is a little bit of arithmetic, simplistic would describe it. The column to the left will always override the column to the right, no matter how many points are accumulated. 1 id trumps 5 classes; 1 class trumps 11 elements (types).

Inheritance relates to descendants. Not all properties are inherited, but many are. The W3C specifications list them for all the properties when you have time to add that site to your reading.

This is heady stuff, without which jQuery will never reveal its true horsepower. Something to keep in mind.


#7

I ran into another issue today. If you ever have it come up, now you will
know the problem. I was putting in all the right code, but it was being
counted as wrong. Then, I realized I was setup (through my Operating
System) as using an "international keyboard". All of my quotation marks
were being rejected because they looked a little different.


#8

Good point. The main site uses American English, and the standard keyboard.


#9

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.