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.
Related
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
I want to find how to select the .if-first-child element that's the first element of a specific parent, which in this case is <div>.
<div class="no-css">
<p class="if-first-child">The style will only take effect here!</p>
<p>No style here..</p>
<p class="if-first-child">No style here..</p>
</div>
<div class="no-css">
<nav>
<p class="if-first-child">No style here..</p>
</nav>
</div>
In other words, e.g. I want to apply background-color: black; in the .if-first-child only if it's the first child of <div>.
Keep note that the div p:first-child selector will still select the .if-first-child element even though it have a <nav> parent.
Unintended, I found how to select the target when I'm exposing in the question that the div p:first-child selector will still select the p:first-child element if it have a <div> grandparent.
div > .if-first-child:first-child {
background-color: black;
}
That will only target the first-child .if-first-child which is a direct child of <div>. It will not target a grandchild .if-first-child:first-child.
In simple, you can try this as well...
.if-first-child{color:red}
div .if-first-child{color:green}
It will target only first child to change the color of the text and rest will apply default text color.
I am using markdown to write my text, so I do not have control over the HTML elements. Therefore, this is given:
<h2>Headline</h2>
<p>A paragraph</p> // standard bottom-margin to next <p>
<p>Another paragraph</p> // double bottom-margin should apply here because the next element is h2
<h2>Another Headline</h2>
<p>And another paragraph</p> standard bottom-margin to next <p>
Is there a css-related approach --- or any at all --- to apply a larger margin between <p> and the next <h2> than between all the other <p> to <p> transitions?
I'd like to explicitly control those <p>s that come before a new <h2>, but not any other.
I'm using float so that a simple <h2> top-margin does not help.
This is what my site looks like:
How about the sibling selector?
h2+p {/*your styles here*/}
Reference: http://css-tricks.com/child-and-sibling-selectors/
Edit: As per your edit this isn't what you're looking for.
You can control the h2's instead, for instance:
h2:not(:first-child) {
margin-top: 10px;
}
This will create a margin of 10px above every h2 except the first.
h2:before {display:block;margin-top:20px;height:20px;content:"";background:#aaa;}
rough example http://jsfiddle.net/eHreL/
This question already has answers here:
Are "div > p" & "div p" same?
(2 answers)
What’s the difference between the CSS selectors “div p” and “div > p”? [duplicate]
(5 answers)
Closed 9 years ago.
What is the difference between the selectors div.red > p and div.red p?
Please point to the key difference between these CSS selectors.
HTML
<div class="red"><p></p><div class="blue"><p></p></div>
Does the first selector select only the first <p> element?
div > p
This will select only p elements that are a child of div
div p
This will select all descendent (i.e. children, children's children etc) p elements of a div
See here for more info.
The easiest way of explaining that is to just make a simple DEMO.
HTML
<div id="id">
<p>First text</p>
<div>
<p>Second text</p>
</div>
</div>
CSS
div#id > p { background: red; }
div#id p { color: green; }
Only the first text has red background, because > takes only p that is direct child of div#id. The second one is not matched because there is another div between div#id and p.
However, they both are green, because div#id p matches all p that are descendant to div#id, no matter how deep in the Document Object Model.
The first selector says "All p tags that are a direct child of div". The second says "All p tags inside of div, regardless of whether they are children, grandchildren" and so on.
Consider the following HTML:
<div>
<p>1</p>
<p>
<p>2</p>
<p>3</p>
</p>
<p>4</p>
</div>
<p>5</p>
div > p will only select direct descendants: 1, 4 and the one with the p elements nested in it.
div p will select all p tags within a div: 1 2 3 4.
See the code below, I need to chnage the font-size of H2 tag within the second 'content-block', I can not modify the Div Tag or the h2 tag themselves directly, I can only modify the content below the h2 tags.
<div class="content-block">
<h2>Title here</h2>
<p>this is some text.</p>
</div>
<div class="content-block">
<h2>Modify This title only</h2>
<p>this is some more text.</p>
<style>## I can add CSS here ##</style>
</div>
Edit: I can not be sure how many 'content-block' divs will be above the one I want to modify, it chnages from page to page. (A shopping cart)
How is the possible?
Thanks.
.content-block + .content-block h2 {/* your css */}
Demo: http://dabblet.com/gist/4013393
+ is what we call Adjacent Sibling Selector.
Use CSS3 :nth-child() Selector hope it may solve your problem
check the Example Here: http://www.w3schools.com/cssref/sel_nth-child.asp