CSS Combinators

1

Hello! I have recently started HTML and CSS and a I would like to ask for some help please.
Can’t really understand selectors (parents, child, siblings…what?).
I am creating a small project to practise and would like to do the following:

I have this:

    <div id="priority">
      <p>Web Design by Silvia Ramos <small>&#169; 2020</small></p>
      <p><small>Made for learning purposes</small></p>
    </div>

And I would like to have the first paragraph on UPPERCASE and the second one on lowercase.

I tried:
#priority > p{
text-transform: uppercase;
}

But it changes the whole thing. I know this would be amended manually (typing it again) but it is for practising and understanding connectors.

Thank you! :slight_smile:

2

Hello @silviaramos88, welcome to the forum.

The selector you use it is telling to the browser engine:
If you find a element with id equal to “priority” and inside that element a"p" element, transform all letters to upper case.

Both paragraphs applie to that description. If you want to change the behavior of the second "p"maybe de best option give it a class

<p class="upper">Web Design by Silvia Ramos <small>&#169; 2020</small></p>

And create a CSS rule for that class

.upper {
text-transform: uppercase;
}

That’s exactly why classes are so important in HTML - CSS.

1 Like
3

@Rigo-Villalta wrote a good solution.

You can add a class “upper” in the first paragraph and work with it in your CSS.

.upper {
text-transform: uppercase;
}