Selecting individual elements help

I’ve got a selector ref in front of me which is great for selecting classes/ids but I always struggle with the following;

Let’s say I want to select the 2nd ‘p’ “Available to walk” to change it’s style, without adding a class how can I target it in a unique way (i.e won’t clash with other ‘p’s’? nth-of-type seems to select both ‘p’.

Thank you.

<div class="top-pattern-profile-con">
  <span class="left-arrow-profile">&#10094;</span>
   <img id="profile-thumbnail" src="" alt="">
    <div class="profile-name-column">
     <p>Samuel Green</p>
      <p>Available to walk</p>
  <span class="Vert-ellipsis">&#8942;</span>

Dont know if this is what you mean:

<p id="x" class="z"> Samuel Green</p>
<p id="y" class="z"> Available to walk</p>

These 2 p elements have same class but different ids.
Using ids you can style them separately, but can style them together if you use class.


Thank you,

The only reason I was trying to avoid class/ids was to get used to the selectors. I usually class everything as it’s much easier but trying to learn how to select things without classing them.

W3schools selectors

This page is about selectors, hope it helps.
Just to mention also that ids and classes are also classed as simple selectors.

1 Like

Never saw this one, thank you.

And thanks for the info!