[Solved] Selecting the first DIRECT child

[Chimpanzee]

Hi everyone. I’ve found a lot of help on child selectors on CSS Tricks but none of them seem to answer this specific problem I’m trying to solve. I’m hoping someone here can help.

Here’s a pen showing old and new markup: http://cdpn.io/qoCcK

As you can see, notifications can now appear above the first paragraph in the entry-content div. When this happens, the dropcap isn’t applied. I want to ignore <p> inside of entry-notifications but still apply the dropcap to the first “proper” paragraph.

Logically, I know that I need to apply the dropcap to the first DIRECT child <p> of entry-content and ignore any child<p>‘s that are inside another <div>, but child selectors are still quite new to me so I’d really appreciate some help figuring this out.

Thanks in advance! :)

[Senff]

Replace:
.entry-content > p:first-child:first-letter

with:
.entry-content > p:nth-of-type(1):first-letter

That should do the trick.

[Paulie_D]

.entry-notifications + p:first-of-type:first-letter{ 
    float: left; 
    font-size: 85px; 
    line-height: 60px; 
    padding-top: 4px; 
    padding-right: 8px; 
    padding-left: 3px;
    font-weight: bold;
    }

http://codepen.io/Paulie-D/pen/eazyx

or what @Senff said.

[Chimpanzee]

Perfect! That makes sense. Thanks very much :)

[Author]

Posts