Hello.I have a problem.
The link is “https://codepen.io/Sentinus/pen/bGELOZx”
The first line of the first p element in container should be red.But it doesn’t work.How do I fix this?
Hi there @Sentinus!
The problem was that a couple of your selectors were not quite right:
.container:first-child{
font-size:150%;
}
.container:first-child::first-line{
color:red;
}
Here your selectors are basically saying “select an element with a class of .container, if it is the first child of something else”, but this is not what you want. Really what you want is “select the first child of an element with a class of .container, if it is a paragraph”. To do that, you need to modify your selectors like this:
.container p:first-child{
font-size:150%;
}
.container p:first-child::first-line{
color:red;
}
1 Like
Oh,I see.Thank you very much!!
Hi @chrisdavidmills. Thank you for explaining this. It helped me too. Thank you to @Sentinus too for posting the question.
My question is a close variant of your answer.
Since the task says to make the first element’s font-size 150%, I was wondering if there were a way to do so without specifying the p element.
I tried to simply select the first child among all the descendants of an element with a class container:
.container *:first-child{
font-size:150%;
}
But that didn’t quite work. It seems to select both the first p element and the table, and I’m unable to figure out why that happens.
Here’s my codepen
Hello @gauravsukhija
your code .container *:first-child say select first child of any element inside the container class
you can use this line .container > *:first-child
hope that help and have a nice day
1 Like
Hey thank you @justsomeone.
Just so I understand correctly, .container *:first-child selects the first child among all the descendants of the div. The tbody node is the first child of the table element, and so with this css we end up applying styles to the table body as well.
.container > *:first-child looks only among the direct children of any element with a container class, and then selects the first among them.
Hi @gauravsukhija, nice to see you on here!
This is because .container *:first-child is saying “select any element that is a first child, which is also a descendant of the .container element.”
.container > *:first-child, which @justsomeone suggests does the same, but it only selects elements that are immediate children of .container, not any descendants.
Ah, and not I see you folks have already said a bunch of other stuff on this thread. I’ll post this anyway, in case my post provides any useful clarifications 
1 Like
Hey, thank you for writing back. Sure helps with understanding these concepts.