Apply CSS to nested HTML code

Question

So, I have this code in "index.html" file:

<div id="Vsebina">
<div class="Slika"></div>
<div id="Prvi" class="Vrh">
<h2>Odstavek 1</h2>
<p><span class="Lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis .</p>
</div>

I have a stylesheet linked to this html document and I am wondering how I can change the text inside class "Lorem" and "p". I have tried typing in my CSS file:

#Vsebina #Prvi .Vrh .Lorem{
    text-transform: uppercase;
}

Nothing happens. If anyone can help me I would be very grateful, thanks.

Answer 1

#Prvi does not have any children which has Vrh class and text-transformation is invalid property so do these:

Change text-transformation: uppercase; to text-transform: uppercase;

Change #Vsebina #Prvi.Vrh .Lorem to #Vsebina #Prvi.Vrh .Lorem

Jsfiddle

#Vsebina #Prvi.Vrh .Lorem  {
  text-transform: uppercase;
  color:red;
}

<div id="Vsebina">
  <div class="Slika"></div>
  <div id="Prvi" class="Vrh">

    <h2>Odstavek 1</h2>

    <p><span class="Lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis .</p>
  </div>
</div>

Updated

Jsfiddle

#Vsebina #Prvi.Vrh p  {
  text-transform: uppercase;
  color:red;
}

<div id="Vsebina">
  <div class="Slika"></div>
  <div id="Prvi" class="Vrh">

    <h2>Odstavek 1</h2>

    <p><span class="Lorem">Lorem ipsum</span> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis .</p>
  </div>
</div>