Apply parent styling on the child element

Question

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;
  }
}

@JinuKurian Thanks for the response. Nope thats also not working. — Victor, Jan 02 '18 at 06:23
@Alex Thanks for the participation. However, it seems like browser is unable to access this property. On the other hand zealvault below answer did worked. So it seems like the li tag under paragraph tags are forbidden. Please share your thoughts if you think thats not the case — Victor, Jan 02 '18 at 06:46
@Victor don't forget to accept an answer that helped you out :) — yarwest, Jan 02 '18 at 11:32
The problem is that in the DOM tree of the page the `ul` element is *not* the child element of the `p`, but its nest sibling (because the end tag for `p` is optional and it [gets implicitly closed before the opening tag](https://html.spec.whatwg.org/dev/syntax.html#optional-tags:the-p-element) of any "block-level" element). So it doesn't actually match this CSS selector. — Ilya Streltsyn, Jan 02 '18 at 12:10
Also, possibly a duplicate of https://stackoverflow.com/q/20156262/2533215 — Ilya Streltsyn, Jan 02 '18 at 12:19
Possible duplicate of [List or longer code snippet inside paragraph](https://stackoverflow.com/questions/20156262/list-or-longer-code-snippet-inside-paragraph) — Ilya Streltsyn, Jan 02 '18 at 12:20

score 6 · Answer 1 · edited Jan 02 '18 at 07:05

6

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;
     }

edited Jan 02 '18 at 07:05

N.K

2,220
1
14
44

answered Jan 02 '18 at 06:34

zealvault

160
10

Was not aware of that, but kinda makes sense. Updated my answer in accordance – yarwest Jan 02 '18 at 06:42

yarwest · Answer 2 · 2018-01-02T06:41:41.553

1

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;
}

edited Jan 02 '18 at 06:41

answered Jan 02 '18 at 06:27

yarwest

873
8
19

@Victor Updated the answer – yarwest Jan 02 '18 at 06:43
1

Putting a list inside a `label` is also not allowed by the HTML spec, although it's technically possible to make such nesting in the browsers, unlike the situation with `p` element which gets implicitly closed before any element not allowed as its child. So `div` would be the better option. – Ilya Streltsyn Jan 02 '18 at 12:15
It's a little cheaty ;) – yarwest Jan 02 '18 at 12:17

score 0 · Answer 3 · answered Jan 02 '18 at 06:57

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>

score 0 · Answer 4 · answered Jan 02 '18 at 11:29

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>

Apply parent styling on the child element

4 Answers4