This forum is now read-only. Please use our new forums! Go to forums
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
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?
Answer 55ab63c876b8feb8430002ff
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
1 comments
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
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
2 comments
It is solved, yes! And upvoted your reply. I’ll bookmark that table, it will come in handy some day. Thank you again.
good i could be of help, the table is indeed very useful, not all are covered in the lesssons
Popular free courses
- Free Course
Learn SQL
In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Beginner friendly,4 LessonsLanguage Fluency - Free Course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner friendly,11 LessonsLanguage Fluency - Free Course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner friendly,6 LessonsLanguage Fluency
1 comments
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!