This question already has answers here:
How can I correctly select the first or the last child with CSS?
(2 answers)
Closed 2 years ago.
HTML:
<body>
<h1>First heading</h1>
<h1>Second heading</h1>
</body>
CSS:
h1:last-child{
color: blue;}
So the problem is that the last h1(Second Heading) is not getting styled, although it`s the last child of its parent(body). This issue occurs with "a" and other tags too, but work perfectly fine with "p".
Try Enclosing your H1 tag within a div
h1:last-child{
color:blue;
}
<body>
<div>
<h1>First heading</h1>
<h1>Second heading</h1>
</div>
</body>
The problem is that in your HTML or IDE, the second h1 is not the last child.
Here's how it looks in jsFiddle:
The body element has four children, and the last child is a script element.
So to make it work, you would have to remove all other elements or, in this case, select the third from the last child. jsFiddle demo
Related
This question already has answers here:
What does the "+" (plus sign) CSS selector mean?
(9 answers)
Closed last year.
<p>hello
<div>test</div>
</p>
<div>yo
<p>hi</p>
</div>
<p>hello</p>
I have the following code and when I use the following styles I get the following.
p + div {
color:orange;
}
It styles the div inside the p, and I thought that it's only supposed to style siblings immediately after on the same level? What's weird is if I do the following
div + p {
color:orange;
}
it does not style the p inside the div tag as shown.
Does anyone know what's going on?
Your HTML markup is invalid. <div> cannot be placed inside <p> so the browser fixes the markup by changing this:
<p>hello
<div>test</div>
</p>
<div>yo
<p>hi</p>
</div>
<p>hello</p>
... into this:
<p>hello</p>
<div>test</div>
<p></p>
<div>yo
<p>hi</p>
</div>
<p>hello</p>
Now p + div matches test and yo. And hi inherits the parent's color.
Your code is broken when you put div inside p tag.
so <div>test</div> is considered as adjacent to p and applied orange color.
and <div>yo<p>hi</p> </div> is considered as adjacent to another p and applied orange color.
For more clarity, See the below DOM structure that has been created using above code.
This question already has answers here:
Nesting <p> won't work while nesting <div> will?
(2 answers)
Closed 1 year ago.
If I have this
.outer {
font-size: 2em;
}
<div class="outer">
Some Outer Div Text
<div class="inner">
Some Inner Div Text
</div>
</div>
Both texts are 32px (16px *2)
However with this HTML:
<p class="outer">
Some Outer Div Text
<p class="inner">
Some Inner Div Text
</p>
</p>
The outer text is 32px, while the inner text is 16px.
How come the paragraph tag doesn't respect the parent's font-size like the div tag? I thought they would both work the same since they are both block elements?
Here's a JSFiddle in case I'm not clear: https://jsfiddle.net/scottfwalter/2Lrd6tzm/
Simple answer is you can't nest p tags, if you open the console and inspect you will see the 2 p tags are siblings instead of parent/child, therefore there is no inheritance.
See this answer for more details Nesting <p> won't work while nesting <div> will?
That's because browsers have their's own predefined styles for basic typography. So for example chrome sets font-size: 16px for <p> but says nothing about <div>.
That's why we use normilize.css or reset.css to avoid such missmatching.
Try setting * {font-size: 16px;} - this should do the trick
This question already has answers here:
Nesting block level elements inside the <p> tag... right or wrong?
(5 answers)
Closed 5 years ago.
According to my understanding of CSS specificity calculations, the color of h1 below should be red, but the browsers show it in blue font. Any idea what I am missing?
#contact h1 {color:blue;} /* specificity: 0101 */
body#contact div p h1 {color:red;} /* specificity: 0104 */
<body id="contact">
<div>
<p>
<h1>Example</h1>
</p>
</div>
</body>
You cannot put an <h1> tag inside a <p> tag. Browsers know this and correct it; if you inspect the markdown of a page with this code, you'll see the browser is automatically closing the <p> tag before the <h1> tag is opened. So the browser is actually presenting your code as:
<body id="contact">
<div>
<p></p>
<h1>Example</h1>
<p></p>
</div>
</body>
And because of this, it means your <h1> is not actually a descendant of <p>. Therefore, your selector of body#contact div p h1 doesn't affect anything.
See Mozilla Developer Network for a list of what elements are allowed inside <p> elements.
This question already has answers here:
CSS Selector for Adjacency
(2 answers)
Closed 7 years ago.
I am trying to select every first paragraph element that follows a header element (e.g. h2). However, due to wrapping in divs, I end up selecting several "first" paragraph elements. Is it possible to select only the paragraph element that follows with CSS combinators? My HTML is like this:
<div>
<h2>Header</h2>
</div>
<div>
<div>
<p>Here goes my first paragraph. This is what I need to select.</p>
<p>Here goes my second paragraph</p>
<p>Here goes my third paragraph</p>
</div>
</div>
<div>
<div>
<p>Here goes my fourth paragraph and I don't want to select this one.</p>
</div>
</div>
This CSS ends up selecting the first as well as what I intended to be fourth paragraph:
p:first-of-type{
text-indent: 0;
}
So I tried with CSS like this:
div * h2 + div * p:first-of-type{
text-indent: 0;
}
But it doesn't work. So is it even possible to combine the descendant selector with the general sibling selector like that?
div * h2 + div * p:first-of-type
That means:
A p which is the first p in its container and which is a descendant of any element which, in turn, is a descendant of a div, which is a sibling of an h2 which is (etc etc).
In your HTML, the div is not a sibling of the h2.
Your problem is that you first need to select the div which is the parent of the h2 and then chain the rest of your selector from there. This isn't possible because CSS doesn't have a parent selector.
You cannot select a childelement from another childelement when they are not siblings or conncted by a hirachy.
You can use this selector, it will select the paragraph you want, but only if your HTML structure stays like you defined it:
div:nth-of-type(2) > div > p:first-child
The best solution would be to give you elements classes and ids. It is best practice to use as less rules as possible in CSS. Rules make the page slower...
Can you edit the html? A couple more selectors could fix this.
<div class="mainContainer"> <!-- new div -->
<div>
<h2>Header</h2>
</div>
<div>
<div>
<p>Here goes my first paragraph. This is what I need to select.</p>
<p>Here goes my second paragraph</p>
<p>Here goes my third paragraph</p>
</div>
</div>
<div>
<div>
<p>Here goes my fourth paragraph and I don't want to select this one.</p>
</div>
</div>
</div> <!-- new div -->
Then with something like:
.mainContainer div:nth-of-type(2) p:first-child { /* css here */ }
You should be able to style just the first paragraph this way, by targeting the first paragraph inside the 2nd "sub" div.
This question already has answers here:
How to select a text node with CSS
(6 answers)
Closed 8 years ago.
In the following HTML is it possible to affect "First Text", eg, giving it a margin, or a width, without affecting the second and third elements.
<div id="first">
First Text
<div id="second">Second Text</div>
<span id="third">Third Text</span>
</div>
margin and width never have the value inherit by default, but the size of a container is going to influence the rendering of its children (simply because of where word wrapping will occur).
Don't mix up your code with container and content elements. This way you won't be able to do it like you're willing to, like APAD1 said.
Instead, use container elements and for each content element a new child node. That way, you can access single child elements with the first-child selector.
This works for me:
<div id="highlight">
<div id="first">First Text</div>
<div id="second">Second Text</div>
<div id="third">Third Text</div>
</div>
CSS:
div#highlight div:first-child{margin:10px;color:red}
Working example here: http://jsfiddle.net/B5Ej9/
Update: TL;DR: It isn't possible to do so with the given HTML without any ugly hack!
If there is no chance to change the HTML, you will need some kind of hack to workaround, as (like Quentin) answered, all the child objects automatically inherit width and margin from parent objects in DOM. The following example might work for some indentation on the left margin of the div, but I know: It's an ugly workaround that should just clarify what I mean (and why you might consider getting the HTML to be changed). Here you go, with your original HTML:
<div id="first">
First Text
<div id="second">Second Text</div>
<span id="third">Third Text</span>
</div>
And the workaround CSS:
div#first { margin: 20px; color: red; background: grey;}
div#first *:not(:root) { margin-left: -20px; color: blue}
That way, you will add a margin to the first div and inherit it to all the childs (second and third), but everything that is not inside the root will be set to a negative margin on the left. But have a look at the background (http://jsfiddle.net/vag58/), you will notice that the background of all child elements is still inherited and you're never ever gonna change that.
If 'second' and 'third' absolutely need to be children of 'first', then you may use an external style sheet for 'first' and inline style for 'second' and 'third'.