How to use multiple titles css - html

Question

I want to use in my css different titles/headers, with the same font but with different font size, etc. I have this:
#titulo1{
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-height:50px;
color: #ffffff;
}
#titulo2{
font-family: 'Roboto', sans-serif;
font-size: 30px;
font-height: 40px;
color: #73bd34;
}
#titulo3{
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-height: 30px;
color: #5f9b16;
}
#titulo4{
font-family: 'Roboto', sans-serif;
font-size: 13px;
font-height: 15px;
font-weight: bold;
color: #000000;
}
Now I want to use some titles to some divs and others to anothers.
Like this:
.slogan #titulo1{
...
}
.pesquisa #titulo3{
...
}
But it doesn't work, I can only make it work by using it in my html file like this:
<div class="slogan" id="titulo1">
Yeah, I had already visited this page:http://www.w3schools.com/cssref/css_selectors.asp and still nothing

Answer 1

You can use selector that select all elements that id starts with "titulo"
[id^="titulo"] {
font-family: 'Roboto', sans-serif;
}
#titulo1{
font-size: 40px;
font-height:50px;
color: #ffffff;
}
#titulo2{
font-size: 30px;
font-height: 40px;
color: #73bd34;
}
#titulo3{
font-size: 20px;
font-height: 30px;
color: #5f9b16;
}
#titulo4{
font-size: 13px;
font-height: 15px;
font-weight: bold;
color: #000000;
}
Definition .slogan #titulo1 has no sense, because id is unique identifier, so #titulo1 means the same.
anyway selector of particular element with several classes, e.g. <div class="class1 class2"> will look .class1.class2 (without space between class names) or div.class1.class2

Answer 2

Its the space in the css, that makes it difficult . Lets see :
Notice this:
.slogan #titulo1{
color:red;
}
This will work for follwoing html structure
<div class="slogan">
<div id="titulo1">
</div>
</div>
Now Notice this:
.slogan#titulo1{
color:red;
}
This will work for follwoing html structure
<div class="slogan" id="titulo1">
</div>
Did you notice the space in the css, if you put an space that mean they are in different element

Answer 3

Use The following. Hope your problem will be solved :)
<div class="slogan">
<div id="titulo1">
--------
--------
</div>
</div>