This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by Israel Torres
over 8 years

First child exceptions

Hello, I’ve finally had the chance to practice CSS by adding some custom CSS to my wordpress site.

I grabbed the CSS from this github gist to add dropcaps to each of my posts. I changed the

 p:first-child:first-letter {

line to

.entry-content article p:first-child:first-letter {

so it will apply only to the first paragraphs from the individual blog posts. The problem here is that if there are <blockquote></blockquote> tags inside the post, the style will apply to them too because wordpress adds paragraphs to them.

How can I change my custom CSS so no other first child gets the style applied?

Hope I’m explaining myself properly. Thanks beforehand for your help.

EDIT: I have to clarify that I want this style applied whether the blockquote is at the beginning or at the end of the post. I’m checking my code and noticed that if there are other elements before the first paragraph then first-child will not be valid since it will no longer be a first-child.

So what I want here is for the style to be applied to the first letter of the first paragraph of the entry post whether there are other elements before it. Also I don’t want it applied to any other first paragraphs inside the post, like the paragraphs inside blockquotes. Does it make sense to you? I hope so.

EDIT 2: Doing some research, I discovered the first-of-type selector, which targets the first occurence of an element and which can replace the first-child of my code. This one can come in handy in case the first paragraph (in which I want my dropcap) comes after another element (like a blockquote), but I still have the problem that it will apply to the first paragraph of any element inside article (like paragraphs inside blockquotes) :(

EDIT 3: Here is my code explaining my problem in a hopefully better way than all the gibberish I previously wrote.

Answer 55acae82937676690e0002a3

1 vote

Permalink

sorry for the mis communication. Question: what is the paragraph inside the blockquotes if it is not the first paragraph?

The solution is like (for your bin at least) super easy, you just use the direct children select (>), as explained in exercise 8, which results in this, what do you think of it?

points
Submitted by stetim94
over 8 years

1 comments

Israel Torres over 8 years

Oh, my god, direct children, how could I miss that? Thank you very much!

Regarding your question, yes, the first paragraph inside the blockquotes is a first paragraph, I just didn’t want it to be stylized. Thank you very much again!

Answer 55ab63c876b8feb8430002ff

0 votes

Permalink

first-of-type is a better idea, i am not familiar with wordpress, but can’t you simple make blockqoute part of your css selector?

i made a little example here, which seems to work. (no idea how blockqoute is nest on wordpress)

the alternative you have is to use the universal selector, you can make a chain with some where a universal selector. you might want to read about universal selector since there is more to it then explained in the lesson, hope this helps

points
Submitted by stetim94
over 8 years

1 comments

Israel Torres over 8 years

Thanks for replying, but I think there’s a misunderstanding. I modified the bin here explaining the problem in a better way (I hope). I mimicked the way wordpress nests paragraphs and blockquotes.

Answer 55acf5e49376768884000671

0 votes

Permalink

take a look at this nice table, it might help you some day.

Given your reaction i assume it is resolved?

Glad i could be of help

points
Submitted by stetim94
over 8 years

2 comments

Israel Torres over 8 years

It is solved, yes! And upvoted your reply. I’ll bookmark that table, it will come in handy some day. Thank you again.

stetim94 over 8 years

good i could be of help, the table is indeed very useful, not all are covered in the lesssons