0

I am a total beginner in css, and I came across the following code which I don't understand.

.single-product h2 {
    font-size: 18px;
    line-height: 25px;
    margin-bottom: 10px;
    margin-top: 15px;
}
.single-product h2 a {
    color: #222;
}
.single-product p {
    color: #1abc9c;
    font-weight: 700;
}

What is the difference between, say h2.single-product {}, compared to the above code?

Physics Mckl
  • 1

3 Answers3

0
  • h2.single-product matches h2 elements with the class single-product
  • .single-product h2 matches h2 elements that are within any element with the class single-product

See bellow the examples applicable for each case. 

    <!-- first declaration -->
    <h2 class="single-product">Testberichte</h2>

    <!-- second declaration -->     
    <div class="single-product">
        <h2>hi</h2>
    </div>
nnunes10
  • 550
  • 4
  • 14
0

'h2.single-product' will apply the following style to a h2 element that has the class single-product.

'.single-product h2' will apply the style to a h2 element that is a child node of an element that has the class single-product.

The whitespace character in CSS is a selector by itself, called "child node" selector; just like the "." character is called the "class" selector.

AVAVT
  • 7,058
  • 2
  • 21
  • 44
  • Your answer is helpful because you provided the keyword "child node". I will research on that. – Physics Mckl Mar 20 '16 at 13:34
  • You can find a list of css selectors with more explanation here: http://www.w3schools.com/cssref/css_selectors.asp – AVAVT Mar 20 '16 at 13:37
-1

For 

h2.single-product {}

single-product class property shows its effect when it is in any h2 tag.

For 

.single-product h2

Property of h2 tag only works when it is in single-product class

LoopCoder
  • 172
  • 6