Search code examples
htmlcssjekyll

Why is the property of an inner div not being applied?

I'm very new to web-dev, so please bear with me. I am using Jekyll to generate my webpage. So I created some custom classes, and specified the css properties in the corresponding _sass file.

The following are the two classes which are relevant to the question:

.quote{
        width: 100%;
        margin: auto;
        text-align: center;
        background-color: #171717;
        font-size: 25px;
        padding: 10px;

        &.author{
            width: 50%;
            float: right;
            font-size: 20px;
            color: red;
            padding: 10px;
        }
  }

This is the css code generated by Jekyll:

section .quote { width: 100%; margin: auto; text-align: center; background-color: #171717; font-size: 25px; padding: 10px; }

section .quote.author { width: 50%; float: right; font-size: 20px; color: red; padding: 10px; }

The following is the relevant HTML code:

<div class="quote">

        <div id="randomquote">
            Hello there, this is supposed to show a quote.
         </div>


        <div class="author">
            This should be the author's name.
        </div>

</div>

However, the properties of author class are not applied to the inner div. Rather it has the properties corresponding to quote. Why is that? Am I missing something?

Please note that I intend to use author inside quote.

Solution

  • Add a space between your & and .author in CSS. See here:

    https://jsfiddle.net/y4j6ua1r/1/

    Also in your generated code, there should be a space between .quote and .author See here:

    https://jsfiddle.net/y4j6ua1r/2/