Selecting individual elements help

HTML-CSS
#1

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="https://i.ibb.co/72LfZcz/avatar.jpg" alt="">
    <div class="profile-name-column">
     <p>Samuel Green</p>
      <p>Available to walk</p>
       </div>
  <span class="Vert-ellipsis">&#8942;</span>
</div>
#2

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.

2 Likes
#3

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.

#4

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
#5

Never saw this one, thank you.

And thanks for the info!