CODEWITHSUNDEEP
htmlcsssass
Victor
Victor

Reputation: 67

Apply parent styling on the child element

I have couple of li tags under my paragraph tags and i am trying to keep the same text style for the li items as per the paragraph items. However, currently its appearing different than the parent(paragraph) element. Following is the sample HTML code:

             <div>
                <p>
                Example paragraph
                    <ul>
                        <li>Example list item 1</li>
                        <li>Example list item 2</li>
                        <li>Example list item 3</li>
                    </ul>
                </p>
            </div>

Following is the current SASS code i am using (could be 100% wrong): 

p {
  font-size: 1.1rem;
  >ul li*{
    font-size: 1.1rem;
  }
}

Upvotes: 1

Views: 158

Answers (4)

satyajit rout
satyajit rout

Reputation: 1651

try this

.font{
  font-size: 10px;
  }
 
  
 
 <div class="first">
                <p>
                Example paragraph </p>
                    <ul>
                        <li>Example list item 1</li>
                        <li>Example list item 2</li>
                        <li>Example list item 3</li>
                    </ul>
               
            </div>

Upvotes: 0

zealvault
zealvault

Reputation: 160

As specified here : http://developers.whatwg.org/grouping-content.html#the-p-element putting list elements inside paragraph is forbidden.

To get this working try using <div> instead of <p>

        <div>
        Example paragraph
            <ul>
                <li>Example list item 1</li>
                <li>Example list item 2</li>
                <li>Example list item 3</li>
            </ul>
        </div>

and the css like :

 div {
        font-size: 1.1rem;
     }

Upvotes: 6

Nims Patel
Nims Patel

Reputation: 1056

Please try that code :

HTML :

 <div class="first">
            <p>
            Example paragraph </p>
                <ul>
                    <li>Example list item 1</li>
                    <li>Example list item 2</li>
                    <li>Example list item 3</li>
                </ul>

        </div>

CSS:

.first p {
  font-size: 1.1rem;
  }

 .first ul li {
  font-size: 1.1rem;
  }


.first p {
  font-size: 10px;
  }
 
 .first ul li {
  font-size: 10px;
  }
 
 <div class="first">
                <p>
                Example paragraph </p>
                    <ul>
                        <li>Example list item 1</li>
                        <li>Example list item 2</li>
                        <li>Example list item 3</li>
                    </ul>
               
            </div>

Upvotes: 0

yarwest
yarwest

Reputation: 990

Putting a list inside a paragraph goes against the language specification, instead I would recommend a wrapping label or a div containing both the paragraph and the list. This could simplify your CSS to just declaring the font-size on the containing div like so.

div {
    font-size: 1.1rem;
}

When having repeating values like these it is probably smart to introduce them as a variable since you will only need to change the value once instead of in multiple spots.

$font_size: 1.1rem;

p {
    font-size: $font_size;
}
li {
    font-size: $font_size;
}

Upvotes: 1

Related Questions