Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS nth child problems

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #37844
    BryGuy
    Member

    I have been doing a lot of modification to the theme for my blog, and I’m at a loss to correct a problem I’m having using the “nth child” element.

    Each post on my blog follows a specific pattern, and I wanted to create CSS to style each post to avoid having to use HTML in each individual post.

    Here is the format that my posts use:

    1. Post title
    2. 1st Paragraph: A quote relevant to the post subject matter styled by “.post blockquote:first-child” from normalize.css
    3. 2nd Paragraph: 1st letter of this paragraph is styled by “.dropcap p:nth-child(2):first-letter” from normalize.css
    4. Remaining Paragraphs: sometimes contain additional quotes styled by “.post blockquote” from normalize.css

    The problem that I’m having involves trying to get the dropcap part of the CSS to only apply to the first letter of the second paragraph. First off I created the following CSS code:

    .dropcap p:nth-child(2):first-letter {
    float: left;
    color: #333333;
    font-size: 55px;
    font-weight: 400;
    margin:-3px 5px 0 0;
    font-family: Francois One, sans-serif;
    text-transform:uppercase;
    }

    There’s a php file called “single.php” that is responsible for pulling the information from the post to be displayed on the blog. Here’s part of that code:







    &after=
    '); ?>

    My solution was to insert the dropcap class into the following div tag:

    This successfully created a dropcap on the first letter of the 2nd paragraph, but it also created a dropcap on the first letter of the second paragraph of a blockquote latter on in the post.

    Here’s the example.

    I’m sure there’s a way to fix this, but I can’t seem to figure it out.

#101978
wolfcry911
Participant

How about this:

.dropcap blockquote:first-child + p:first-letter
#101980
BryGuy
Member

As it turns out, some of my posts have an image in between the 1st and 2nd paragraph which makes this code impossible to use (the image is considered the 2nd paragraph in wordpress). I’m just going to use HTML in the post to insert the CSS.

#101982

@BryGuy Using a class is best practice as depending on nth-child selectors can cause issues when the content changes (as you have discovered).

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.