Question 256262 in Html Question posted in
Some basic documentation can be found here.

Html – Using first-child and first-of-type affecting too many paragraphs

I would like the first paragraph of a blog post to be in large letters, but whatever I try I end up with the CSS affecting not only the first paragraph of article’s first div, but also the first paragraph of the other sub-divs.

Removed some extra code for simplicity.

I want the first paragraph in div class="sqs-layout" to be in big letters, but instead all first paragraphs of the sub-divs are affected.

I have experimented with both first-child and first-of type, using the classes of the divs, only the child > and all the ancestors (no >). This is some of what I tried:

    article.BlogItem > h1.BlogItem-title + div p:first-of-type {
    font-size: xx-large;
    }

    article.BlogItem > div p:first-of-type {
    font-size: xx-large;
    }

<article id="post-64bb9b9f2da2562b9743df79" class="BlogItem>
<h1 class="BlogItem-title"</h1>
<div class="sqs-layout">
    <div class="row sqs-row"">
        <div class="col sqs-col-12 span-12">
            <div class="sqs-block html-block sqs-block-html">
                <div class="sqs-block-content">
                    <div class="sqs-html-content">
                        <p class="">First para should be big </p>
                        <p class="">Second para should be small</p>
                    </div>
                </div>
            </div>

            <div class="sqs-block html-block sqs-block-html">
                <div class="sqs-block-content">
                    <div class="sqs-html-content">
                        <p class="">Second div First para, should be small </p>
                        <p class="">Secondd div Second para, should be small</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

How can I make sure only the very first paragraph is affected?

Tags:

2

Answers


  1. 0

    See this solution

    .sqs-block-html:first-child p:first-child{
  font-size: 55px;
}

    You have to address the "first-child" at the right level where the sibling is present ;P

    Login or Signup to reply.
  2. 0

    Try this:

    <!DOCTYPE html>
<html>
<head>
<style>
   .sqs-block:nth-child(1) p:nth-child(1){
    color:red;
    }
</style>
</head>
<body>
<article id="post-64bb9b9f2da2562b9743df79" class="BlogItem">
<h1 class="BlogItem-title"></h1>
<div class="sqs-layout">
    <div class="row sqs-row">
        <div class="col sqs-col-12 span-12">
            <div class="sqs-block html-block sqs-block-html">
                <div class="sqs-block-content">
                    <div class="sqs-html-content">
                        <p class="">First para should be big </p>
                        <p class="">Second para should be small</p>
                    </div>
                </div>
            </div>

            <div class="sqs-block html-block sqs-block-html">
                <div class="sqs-block-content">
                    <div class="sqs-html-content">
                        <p class="">Second div First para, should be small </p>
                        <p class="">Secondd div Second para, should be small</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>

</body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search