I'm trying to set a margin-top of 20px to all my paragraph elements excepting the first one. I've this code:
<div>
<h3>Title</h3>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</div>
And this is my CSS:
div p{
margin-top: 20px;
}
div p:first-child{
margin-top: 0;
}
But this isn't working... I think it's because of the , but I can't figure out how to fix it... I'm sure you can help me out!
I apologize if I messed up with my english, I hope I made myself clear!
Thanks!!!
To set a margin-top of 20px to all paragraph elements in a sequence of such elements excepting the first one, use
p + p { margin-top: 20px; }
If you additionally wish to set the margin top of the first p element in a sequence to zero, as it seems, just add
p { margin-top: 0; }
The rule with a more specific selector will override this for any element except the first one in a sequence.
The selector div p:first-child does not work, because it matches a p element that is the first child of its parent and a descendant of a div element. In your example, no p element is the first child of its parent.
p in your example isn't first child, h3 is. Go with:
div h3 + p {
margin-top: 0;
}
Demo: http://jsfiddle.net/fSZWU/
The pseudo-class :first-child doesn't indicate the first element of that type which is child of its parent. It rather means the first child element of its parent.
I remember being confused at first as well, because I was expecting :first-child = first. The solution proposed by #yabol (h3 + p) will get you the paragraph next to the h3, which, in your case, is the first <p>; but be careful because by changing the structure of your page you might lose that particular style.
To achieve exactly what you are looking for, you have to use the CSS3 pseudo class :first-of-type. Be careful though with the support (only IE9+!)
Try it out yourself!
Related
It looks like the text-indent for div is 0px ( which is the default body text-ident size), but why it is inheriting body element? why it is not inheriting P element who is the parent of div, setting text-indent to 32px?
p {
text-indent: 32px;
}
div {
text-indent: inherit;
}
<p>In my younger, he told me, ,
<div>'just remember that all the people in this world haven't had the advantages thatyou've had.'</div>
</p>
You cannot insert "div" tag inside "p" tag that is not valid in html. but you can insert "p" tag inside "div" tag. If you want the child element to inherit the "p" element property just change the "div" to "p".
The text-indent property specifies the indentation of the first line in a text-block and no all lines.
read more : https://www.w3schools.com/cssref/pr_text_text-indent.asp
Syntactically, a div inside a p is invalid in all standards of HTML.
read More : Nesting block level elements inside the <p> tag... right or wrong?
you can use span instead of div.
Like this :
p {
margin-left: 32px;
}
<p>In my younger, he told me,<br><br>
<span>'just remember that all the people in this world haven't had the advantages thatyou've had.'</span>
</p>
If you want use div Insistence,use margin-left for indent.
p {
text-indent: 32px;
}
div {
margin-left: 32px;
}
<p>In my younger, he told me,
<div>'just remember that all the people in this world haven't had the advantages thatyou've had.'</div>
</p>
Use <span> instead of <div>
You cannot insert <div> tag inside <p> that is not valid in html.
<p>In my younger, he told me, ,
<span>'just remember that all the people in this world haven't had the advantages that you've had.'</span>
</p>
Hope this will help you
Here is your answer as per your comment,
why I can't put a div inside a p?
Because <p> is a block level element, and it is used for displaying text, it won't allow any other block level elements inside it,
but you can use inline elements like <span> and <strong>
Why this code doesn't work?
::selection:first-child{
background-color: #ffa563;
}
This works fine - :first-child:last-child (when element is first child AND last child)
::selection is not an element. try :first-child::selection should work.
:first-child::selection {
color: red;
}
<div>First Child</div>
<div>Second Child</div>
You mixing up pseudo class and pseudo element. ::selection is pseudo element, so it doesn't contain anything and only work with few css attributes.
If you want to style selection in first child, use :first-child::selection instead
When you try to use a selector like "::selection" or ":first-child" it´s better if you specify the container.
<div>
<p>text 1</p>
<p>text 2</p>
</div>
and the css:
div p:first-child::selection {
color: red;
background: yellow;
}
the first 'p' will show different if you select.
Note that :first-child will never adjust to the selectors listed before. For example, p:first-child will not match for a structure of <div><h1></h1><p></p></div> since the p is the second tag.
Similarly, a ::selection:first-child would also not match the first tag in the selection but only a selected element that is also a first child. And at that point, it’s equivalent to :first-child::selection.
As for why it doesn’t work, ::selection is a pseudo element. Using it creates some kind of an element that is matched. But that pseudo element never exists in the DOM, so it cannot be the first child of something. So the whole selector will not match.
I have read Is there a CSS selector for the first direct child only? and http://www.w3schools.com/cssref/css_selectors.asp
I guess I have to apply the effect to the first-child of the <h1> tag, but I couldn't get it to work. So instead, I'm trying to use the nth-child, but still no luck.
JSFiddle
<section>
<article>
<h1>Test Details</h1>
<ul>
<li>Layer This</li>
<li>Layer That</li>
<li>Layers</li>
</ul>
</article>
</section>
<section>
<article>
<h1>Campaign details</h1>
<p>Text</p>
</article>
</section>
CSS
section {
padding:30px;
}
section article {
background:#EBEBEB;
}
section article h1 {
background:#0C79CB;
padding:10px;
}
/* This is where I am struggling */
section article h1:nth-child(2):before {
background-color:white !important;
content:'';
height:10px;
display:block;
}
If you open the fiddle, you'll note that the header has a blue background, and the content has a grey background. All I'm trying to do is to 'insert' a line of white:
Current:
Desired (note white between the blue and grey)
Please note, I know this is quite trivial if I just add a new div with a class, or even add a border-bottom:solid 5px white; to the <h1> tag, the point is I'm trying to learn about CSS selectors so is this possible using CSS Selectors?
:first-child can be used with or without knowing the element type.
You can either do parent > :first-child to match any first child, whatever node type it is, or you can do parent > p:first-child to only match the first child if it's a p tag.
You can also do parent > p:first-of-type to match the first p inside parent, even if it isn't the first child.
To complete the example you are attempting using pseudo elements:
It is possible to use :nth-child(1) to select the first child like :first-child. Note: In this example it is pointless, as you will only have one <h1> per <article>.
section article h1 is given position: relative and it's position: absolute children will be positioned in relation to it.
The :after is given position: absolute and width: 100% in order to create a line at the bottom of your <h1> background.
Remember that the :after and :before pseudo elements are the equivalent of:
<h1>
<span>This is the :before</span>
I am the heading
<span>This is the :after</span>
</h1>
Have an example
CSS
section article h1 {
background:#0C79CB;
padding:10px 10px 20px;
position: relative;
}
/*
-- Select the first h1 child of article and generate a pseudo element.
*/
section article h1:nth-child(1):after {
background-color:white;
content:'';
height:10px;
width: 100%;
display:block;
position: absolute;
bottom: 0;
left: 0;
}
In your example, you're trying to select the second child of the h1, but that element doesn't have any children, and so it fails. You have to select the second child of the parent of the h1
section article :nth-child(2):before
This has the advantage that you don't put any tag name in there, so it will work even if one day you'll change the h1 to an h2, for example.
That last selector could be rewritten also to
section article :first-child:after
It's not the same thing, but you can also add generated content after an element (and in your case it'll be fine and work in the same way).
Or, if you want to match something against the h1, you need to target its next sibling, using the sibling selector
section article h1 + *:before
This selector will choose the first element (whatever kind it is) that appears right after an h1.
Or, inserting generated content after the element, you can use this
section article h1:after {
background-color: white !important;
content: '';
height: 10px;
display: block;
}
Which, in my opinion, is the simplest thing to do
I may have two types of html...
One:
<div>
<h4></h4><!--not to this-->
<p></p>
</div>
Two:
<div>
<h4></h4><!--this should be styled--->
<h4></h4>
<p></p>
</div>
All styling are the same but just border-bottom to h4 of first h4 tag only if it contains two h4 tags as in the example. How to do without changing html?
You can combine :first-child, :not() and :only-of-type pseudo-classes to achieve that.
Here you go:
h4:first-child:not(:only-of-type) {
background-color: gold;
}
WORKING DEMO.
This selector represents the <h4> element which is the first child of its parent whereas it's not the only of TYPE of elements in the children tree of the parent.
From the MDN:
The :only-of-type CSS pseudo-class represents any element that has
no siblings of the given type.
Let's go Crazy!
If the <h4> element is not the first child of its parent, we can select the first <h4> element and achieve the same effect by using :first-of-type pseudo-class as follows:
h4:first-of-type:not(:only-of-type) {
background-color: gold;
}
UPDATED DEMO.
For further details on :first-of-type vs :first-child you can refer my answer here.
you need to style the border-bottom of your 1st h4 only if the parent contains two adjacent headings
you could then style the border-top of the 2nd h4 and obtain the same effect
h4 + h4 {
border-top: ...
}
When you have one heading only, no style will be applied. If you have two or more adjacent headings, a border between them will be applied
This is what you need:
h4:first-child:nth-last-of-type(n+2)
{
color:green;
}
FIDDLE
You can use the First-child class.
I could look like this:
div h4:first-child{
CODE HERE
}
I think you are better off styling the second h4 if possible, as you would not be able to tell with CSS whether there are one or two h4's in the div.
You can do this with nth-child
div h4:nth-child(2) {
// your styles.
}
Fiddle
Both of the following codes seem to work properly to style the span element:
<style>
div p span {
font: 18px arial;
color: red;
}
</style>
<div>
<p>
<span>
Hello, world!
</span>
</p>
</div>
<style>
div span {
font: 18px arial;
color: red;
}
</style>
<div>
<p>
<span>
Hello, world!
</span>
</p>
</div>
But I'm not sure if the second one is the right coding and if there's a difference between them, for example regarding browser support.
Neither of them is a “subchild selector”; there is no such concept in CSS. They are different descendant selectors, or descendant combinators as they are called in the Selectors Level 3 specification. Their meanings are different, so it depends on the purpose which one is better.
The selector div span matches any span element that is a descendant of a div element. The selector div p span matches any span element that is a descendant of a p element that is a descendant of a div element. Both selectors are rather theoretical as such; they are hardly useful in practical situations without some additional components such as class selectors.
They both work because the elements selected by div p span are a subset of the ones selected by div span.
If you include a <span> as a child of the <div>, the second one will select it, but the first one will not. If you don't include a <span> as a child of the <div>, they will select exactly the same elements.
For example:
<div>
<span>Only the second selector will make this text red</span>
<p>
<span>Hello, world!</span>
</p>
</div>
Well, it really depends on the context. For example, this selector...
div p span
will only apply to all span elements that are children of a p element which in turn, are children of a div element. Consider, this html...
<div>
<span class="title">Title</span>
<span class="desc">Description</span>
<p>
<span>Content</span>
<p>
</div>
the following css declaration will color the content span in blue
div p span
{
color:Blue;
}
however the style is not applied to the title and the description because they are not children of a p element. Now by using this css declaration...
div span
{
color:Blue;
}
will cause both the title, description and the content to be coloured in blue because this selector targets all span elements that are nested within a div element
As for performance, that's hard to determine because it all depends on implementation and how well different browsers traverse through a DOM hierarchy and apply the style. But, I'd guess that the more specific you can be the better so that the HTML parser can target elements directly. With that in mind, this css selector...
div p span
should perform faster than
div span
because it will cause the rendering engine to look for all div element, then p elements ignoring all other elements (including span elements that are direct children) and finally it'll look for span elements
both of them will work but
div p span {
font: 18px arial;
color: red;
}
is more correct, and you are less likely to have problems like when you decide to add a span in an li for some other possible purpose.
div > p > span {
font: 18px arial;
color: red;
}
First method is correct way.The styles work only span that inside of the p tag and you can give/edit/change specific styles on this item ...but the second method's style work all span inside of div tag..