css two colors of h1

Question

i have this CSS code:

h1 {
    font-size:22px;
    color:#341C12;
    font-weight:normal;
    font-style:italic;
}
.h1color h1{
    color:#862E06;
}

and this HTML Code

<h1>News <span class="h1color">&amp; events</span></h1> 

but its not working. want i want to do is have the first h1 text to be color #341C12 and the other text to #862E06 with using only 1 h1 tag..

Answer 1

This:

.h1color h1{

Should be:

h1 .h1color {

The order is parent child, if you always just have 1 span, you could also leave out the class, and do:

h1 span {

Answer 2

The descendant selector .h1color h1 selects all h1 elements that are descendants of an element with the class h1color. But you need all elements with the class h1color that are descendants of an h1 element.

So just change the order of the selectors:

h1 .h1color {
    color: #862E06;
}