Skip to main content

Forums

This topic contains 9 replies, has 3 voices, and was last updated by  gulliver 2 years ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #257115

    gulliver
    Participant

    I need a little confirmation/clarification…

    If I’ve understood things correctly (relatively rare, nowadays), the pseudo selectors ‘:first-of-type’ and ‘:last-of-type’ apply only to elements and not classes, and match every element that is the first/last child, of a particular type, of its parent.

    So, if I used the code below, expecting it to apply to just the last p in ‘div class=”example”‘, I’d get unwanted results elsewhere… because, rather than confining the treatment to ‘the last p in the div with a class of ‘example’, instead every ‘p’ that is the last in its parent div would also be affected?

    div.example p:last-of-type
    {
    /* css declarations; */
    }

    That seems right – in which case I can’t use it and have to find an alternative to target just a specific div.

    #257116

    Paulie_D
    Moderator

    I think you have grasped it.

    The nth-of-x selectors are incredibly generic and usually need additional specificity to make sure they don’t also select other elements.

    Take your div.example p:last-of-type example.

    Yes, this will target the last paragraph in the div with a class of examplebut it won’t stop there.

    It will also target the <p> in this structure…

    <div class="example">
    
      <p></p>
      <p>Selects this</p>
    
      <div class="other">
        <p></p>
        <p>And this</p> /* I'm the last <p> tag that is also a descendant of the example div */
      </div>
    
    </div>
    

    …because we haven’t been specific enough in the selector.

    #257117

    gulliver
    Participant

    @ Paulie_D… thanks.

    With ‘need additional specificity’, can I (and if so, how) specifically target a single div with a first/last of type?

    #257118

    Paulie_D
    Moderator

    Use the other selectors available to you. >, ~ & + etc.

    This div.example p:last-of-type is different from div.example > p:last-of-type for instance.

    Or just add additional classes as needed

    But in general, I’d avoid them nth unless you really can’t do it any other way.

    #257124

    gulliver
    Participant

    @ Paulie_D… thanks.

    My css knowledge is relatively little, and so I’ll learn more about your suggestion… and certainly avoid using ‘nth-of-x’.

    Currently, if I’ve understood, I don’t see a way to do what I’d originally hoped to do… confine the style to an element within a specific div (in this case: the last p in ‘div class=”example”), and not have other divs also affected.

    UPDATE: I think I may still be misunderstanding this… a simple Codepen test (https://codepen.io/glvr/pen/RZPzME) suggests desired behavior can be targeted and confined to a specific div.

    #257131

    bearhead
    Participant

    In your example, you’re not applying the last-of-type selector to a specific class, instead you are applying it to last child p element of a given div with a specific class.

    BUT

    You should be able to accomplish what you are after… in fact you have the correct css for such in your demo. div.test2 p:last-of-type.

    Just note that the last of type selector is being applied to the p element and not the div.

    #257156

    gulliver
    Participant

    @bearhead… thanks.

    Your point of ‘note that the last of type selector is being applied to the p element and not the div’ helps me to understand.

    But I’m still confused by this…
    With html and css of:

    <p>Paragraph 7.</p>
    <p>Paragraph 8.</p>
    
    p.test:last-of-type {color: yellow;}
    
    

    Paragraph 8 (last of type in parent body) is normal color – why?

    Without the pseudo-selector it seems logical… ‘apply to any/all p-elements of class=”test”, and make them yellow’. So as there are no p-elements of that class, there’s nothing to apply the rule to and the text is normal color.

    But, if I’ve understood correctly…
    In ‘p.test:last-of-type {color: yellow;}’, ‘.test’ is ignored.
    So the rule is applied (as ‘p:last-of-type {color: yellow;}’) to the last p (regardless of class) in the parent – in this case, paragraph 8… in which case, why isn’t it yellow?

    #257164

    bearhead
    Participant

    yes, p.test:last-of-type {color: yellow;} means apply yellow color to the last p with class test.

    The class isn’t ignored… it is important to raise the specificity of your selector, maybe the below example will clarify:

    The last-of-type selector targets the last type of an element. So if you were to write the selector as just .test:last-of-type and then have a p element followed by a span in your html (both with class test), both would be changed to yellow.
    example:

    https://codepen.io/kvana/pen/zdvJwj

    but if you write p.test:last-of-type, only the last p with class test will be yellow. That’s what I mean by the last of type targets elements and not classes.

    #257165

    Paulie_D
    Moderator

    but if you write p.test:last-of-type, only the last p with class test will be yellow. That’s what I mean by the last of type targets elements and not classes.

    Not quite…although it might be the way it’s worded

    p.test:last-of-type will only select an element if it is both the last one AND has a class of test.

    https://codepen.io/Paulie-D/pen/WEQaYa

    Otherwise it’s trying to select nth-of-class…which does not exist.

    #257426

    gulliver
    Participant

    @bearhead and @paulie_d

    Thanks for further clarifying. (And I’m sorry for the slow reply – I’ve been away.)

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star