Why first paragraph not taking this style p:first-child
#content p:first-child {color:#4C4C4C;
font-size:1.2em;
font-weight:bold;
line-height:1.8;
margin-bottom:0.5em;}
<div id="content">
<h1>Welcome</h1>
<p>first paragraph</p>
<p>second paragraph</p>
<p>third paragraph</p>
</div>
How to select first paragraph from css?
You're looking for the :first-of-type psuedo selector!
So, you'd do this to get that first paragraph:
#content p:first-of-type
While the previous answers have already defined the problem (that the p isn't the first child of the parent div), here's a solution to your problem, to target the first p that follows a h1, depending on your browser:
h1 + p { /* styles any paragraph that immediately follows a h1 element */ }
The selector matches any p element which is the first child of its parent.
In this case the p is the second child of its parent.
Have a look at: http://www.w3schools.com/CSS/css_pseudo_classes.asp
the content of P isn't its first child - from what I've seen a tag such as or would be the first child not the actual content.
Could always just assign a class to every first paragraph - full proof.
p.indent{
text-indent:50px;
}
Related
For example:
div > p.some_class {
/* Some declarations */
}
What exactly does the > sign mean?
> is the child combinator, sometimes mistakenly called the direct descendant combinator.1
That means the selector div > p.some_class only matches paragraphs of .some_class that are nested directly inside a div, and not any paragraphs that are nested further within. This implies that every element matching div > p.some_class necessarily also matches div p.some_class, with the descendant combinator (space), so the two are understandably often confused.
An illustration comparing the child combinator with the descendant combinator:
div > p.some_class {
background: yellow;
}
div p.some_class {
color: red;
}
<div>
<p class="some_class">Some text here</p> <!-- [1] div > p.some_class, div p.some_class -->
<blockquote>
<p class="some_class">More text here</p> <!-- [2] div p.some_class -->
</blockquote>
</div>
Which elements are matched by which selectors?
Matched by both div > p.some_class and div p.some_class
This p.some_class is located directly inside the div, hence a parent-child relationship is established between both elements. Since "child" is a type of "descendant", any child element is by definition also a descendant. Therefore, both rules are applied.
Matched by only div p.some_class
This p.some_class is contained by a blockquote within the div, rather than the div itself. Although this p.some_class is a descendant of the div, it's not a child; it's a grandchild. Therefore, only the rule with the descendant combinator in its selector is applied.
1 Many people go further to call it "direct child" or "immediate child", but that's completely unnecessary (and incredibly annoying to me), because a child element is immediate by definition anyway, so they mean the exact same thing. There's no such thing as an "indirect child".
> (greater-than sign) is a CSS Combinator.
A combinator is something that explains the relationship between the selectors.
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS3:
descendant selector (space)
child selector (>)
adjacent sibling selector (+)
general sibling selector (~)
Note: < is not valid in CSS selectors.
For example:
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
Output:
More information about CSS Combinators
As others mention, it's a child selector. Here's the appropriate link.
http://www.w3.org/TR/CSS2/selector.html#child-selectors
It matches p elements with class some_class that are directly under a div.
All p tags with class some_class which are direct children of a div tag.
( child selector) was introduced in css2.
div p{ } select all p elements decedent of div elements, whereas div > p selects only child p elements, not grand child, great grand child on so on.
<style>
div p{ color:red } /* match both p*/
div > p{ color:blue } /* match only first p*/
</style>
<div>
<p>para tag, child and decedent of p.</p>
<ul>
<li>
<p>para inside list. </p>
</li>
</ul>
</div>
For more information on CSS Ce[lectors and their use, check my blog,
css selectors and css3 selectors
html
<div>
<p class="some_class">lohrem text (it will be of red color )</p>
<div>
<p class="some_class">lohrem text (it will NOT be of red color)</p>
</div>
<p class="some_class">lohrem text (it will be of red color )</p>
</div>
css
div > p.some_class{
color:red;
}
All the direct children that are <p> with .some_class would get the style applied to them.
The greater sign ( > ) selector in CSS means that the selector on the right is a direct descendant / child of whatever is on the left.
An example:
article > p { }
Means only style a paragraph that comes after an article.
This question's answers are a community effort. Edit existing answers to improve this post. It is not currently accepting new answers or interactions.
For example:
p + p {
/* Some declarations */
}
I don't know what the + means. What's the difference between this and just defining a style for p without + p?
See adjacent selectors on W3.org.
In this case, the selector means that the style applies only to paragraphs directly following another paragraph.
A plain p selector would apply the style to every paragraph in the page.
This will only work on IE7 or above. In IE6, the style will not be applied to any elements. This also goes for the > combinator, by the way.
See also Microsoft's overview for CSS compatibility in Internet Explorer.
It's the Adjacent sibling selector.
From Splash of Style blog.
To define a CSS adjacent selector, the
plus sign is used.
h1+p {color:blue;}
The above CSS code will format the
first paragraph after (not inside) any h1 headings
as blue.
h1>p selects any p element that is a direct (first generation) child (inside) of an h1 element.
h1>p matches <h1> <p></p> </h1> (<p> inside <h1>)
h1+p will select the first p element that is a sibling (at the same level of the dom) as an h1 element.
h1+p matches <h1></h1> <p><p/> (<p> next to/after <h1>)
The + sign means select an "adjacent sibling"
For example, this style will apply from the second <p>:
p + p {
font-weight: bold;
}
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
Example
See this JSFiddle and you will understand it: http://jsfiddle.net/7c05m7tv/
(Another JSFiddle: http://jsfiddle.net/7c05m7tv/70/)
Browser Support
Adjacent sibling selectors are supported in all modern browsers.
Learn more
http://css-tricks.com/almanac/selectors/a/adjacent-sibling/
http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
"+" is the adjacent sibling selector. It will select any p DIRECTLY AFTER a p (not a child or parent though, a sibling).
The + combinator is called the Adjacent sibling combinator / Next-sibling combinator.
For example, the combination of p + p selectors, selects the p elements immediately following the p elements
It can be thought of as a "looking alongside" combination that checks for the immediately following element.
Here is a sample snippet to make things more clear:
body {
font-family: Tahoma;
font-size: 12px;
}
p + p {
margin-left: 10px;
}
<div>
<p>Header paragraph</p>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is yet another paragraph</p>
<hr>
<p>Footer paragraph</p>
</div>
Since we are on the same topic, it is worth mentioning another combinator, ~, which is the General sibling combinator / Subsequent-sibling combinator
For example, p ~ p selects all the p which follows the p doesn't matter where it is, but both p should be having the same parent.
Here is what it looks like with the same markup:
body {
font-family: Tahoma;
font-size: 12px;
}
p ~ p {
margin-left: 10px;
}
<div>
<p>Header paragraph</p>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is yet another paragraph</p>
<hr>
<p>Footer paragraph</p>
</div>
Notice that the last p is also matched in this sample.
The + selector targets the one element after. On a similar note, the ~ selector targets all the elements after. Here's a diagram, if you're confused:
+ presents one of the relative selectors. Here is a list of all relative selectors:
div p - All <p> elements inside of a <div> element are selected.
div > p - All <p> elements whose direct parent is <div> are selected. It works backwards too (p < div)
div + p - All <p> elements placed immediately after a <div> element are selected.
div ~ p - All <p> elements that are preceded by a <div> element are selected.
Here is some more about selectors.
It would match any element p that's immediately adjacent to an element 'p'. See: http://www.w3.org/TR/CSS2/selector.html
p+p{
//styling the code
}
p+p{
} simply mean find all the adjacent/sibling paragraphs with respect to first paragraph in DOM body.
<div>
<input type="text" placeholder="something">
<p>This is first paragraph</p>
<button>Button </button>
<p> This is second paragraph</p>
<p>This is third paragraph</p>
</div>
Styling part
<style type="text/css">
p+p{
color: red;
font-weight: bolder;
}
</style>
It will style all sibling paragraph with red color.
final output look like this
If I want to style a div element only when there is a p sibling, I can write the following CSS rule:
p ~ div
Is there a CSS rule for styling an element when there isn't a matching sibling?
For example something like:
p !~ div
<section>
<p></p>
<div></div>
<div></div>
</section>
<section>
<div></div> <!-- Style this one -->
<div></div> <!-- Style this one -->
</section>
If :not() allowed combinators, you would be able to simply do div:not(p ~ div). But it doesn't, so you won't be able to use :not() in that manner.
The selector you need will depend on your structure. In your case, if not having the p causes the first div to be the first child of your section, you can use div:first-child to make sure you select your divs if and only if that condition is met:
div:first-child, div:first-child ~ div
If your structure does not allow such a selector to be constructed, then you will have to rely on an overriding rule as Danield suggests.
How about doing it the other way around:
Set a style for all the divs according to the way you want them when no <p> elements are there.
Then override that style when there is a <p> element.
section div
{
color: green;
}
section p ~ div
{
color: black;
}
FIDDLE
Just give id/class to div and write its corresponding CSS simple
<!DOCTYPE html>
<html>
<head>
<style>
p:last-child
{
background:#ff0000;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>
</html>
Question:
If i change
p:last-child
{
background:#ff0000;
}
to
:last-child
{
background:#ff0000;
}
then the whole page became red. why? what is the difference between p:last-child and :last-child?
p:last-child will select a p element if it's a last-child, if you've any other element as your last-child it will fail
Demo
In this case, you should use a more stricter pseudo like
p:last-of-type {
background:#ff0000;
}
Demo 2
The above will select p element, which is last regardless of any other element which can be last-child of the parent element.
Coming to this selector, :last-child, is not specific at all, you haven't specified last-child of what? So it will select any parent elements last-child
So
:last-child {
background:#ff0000;
}
Will select i and body element but NOT p as it's not the last-child of body, same way if you use :last-of-type it will select
i body as well as p because now we are using last-of-type so it selects last element of each distinct element.
Demo
You can use firebug to inspect each element and see how the elements pick up these properties.
Since the :last-child selector selects all elements that are the last child of their parent.
By default all elements selected it, the first one is to specify the p element. [Google Translation]
p:last-child works by applying the CSS property to only the last child of a paragraph element.
:last-child works by applying the CSS property to the last child of the parent element. In this case, the last child would always be the body, since we always have one body, right? :)
This question's answers are a community effort. Edit existing answers to improve this post. It is not currently accepting new answers or interactions.
For example:
p + p {
/* Some declarations */
}
I don't know what the + means. What's the difference between this and just defining a style for p without + p?
See adjacent selectors on W3.org.
In this case, the selector means that the style applies only to paragraphs directly following another paragraph.
A plain p selector would apply the style to every paragraph in the page.
This will only work on IE7 or above. In IE6, the style will not be applied to any elements. This also goes for the > combinator, by the way.
See also Microsoft's overview for CSS compatibility in Internet Explorer.
It's the Adjacent sibling selector.
From Splash of Style blog.
To define a CSS adjacent selector, the
plus sign is used.
h1+p {color:blue;}
The above CSS code will format the
first paragraph after (not inside) any h1 headings
as blue.
h1>p selects any p element that is a direct (first generation) child (inside) of an h1 element.
h1>p matches <h1> <p></p> </h1> (<p> inside <h1>)
h1+p will select the first p element that is a sibling (at the same level of the dom) as an h1 element.
h1+p matches <h1></h1> <p><p/> (<p> next to/after <h1>)
The + sign means select an "adjacent sibling"
For example, this style will apply from the second <p>:
p + p {
font-weight: bold;
}
<div>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</div>
Example
See this JSFiddle and you will understand it: http://jsfiddle.net/7c05m7tv/
(Another JSFiddle: http://jsfiddle.net/7c05m7tv/70/)
Browser Support
Adjacent sibling selectors are supported in all modern browsers.
Learn more
http://css-tricks.com/almanac/selectors/a/adjacent-sibling/
http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
"+" is the adjacent sibling selector. It will select any p DIRECTLY AFTER a p (not a child or parent though, a sibling).
The + combinator is called the Adjacent sibling combinator / Next-sibling combinator.
For example, the combination of p + p selectors, selects the p elements immediately following the p elements
It can be thought of as a "looking alongside" combination that checks for the immediately following element.
Here is a sample snippet to make things more clear:
body {
font-family: Tahoma;
font-size: 12px;
}
p + p {
margin-left: 10px;
}
<div>
<p>Header paragraph</p>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is yet another paragraph</p>
<hr>
<p>Footer paragraph</p>
</div>
Since we are on the same topic, it is worth mentioning another combinator, ~, which is the General sibling combinator / Subsequent-sibling combinator
For example, p ~ p selects all the p which follows the p doesn't matter where it is, but both p should be having the same parent.
Here is what it looks like with the same markup:
body {
font-family: Tahoma;
font-size: 12px;
}
p ~ p {
margin-left: 10px;
}
<div>
<p>Header paragraph</p>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
<p>This is yet another paragraph</p>
<hr>
<p>Footer paragraph</p>
</div>
Notice that the last p is also matched in this sample.
The + selector targets the one element after. On a similar note, the ~ selector targets all the elements after. Here's a diagram, if you're confused:
+ presents one of the relative selectors. Here is a list of all relative selectors:
div p - All <p> elements inside of a <div> element are selected.
div > p - All <p> elements whose direct parent is <div> are selected. It works backwards too (p < div)
div + p - All <p> elements placed immediately after a <div> element are selected.
div ~ p - All <p> elements that are preceded by a <div> element are selected.
Here is some more about selectors.
It would match any element p that's immediately adjacent to an element 'p'. See: http://www.w3.org/TR/CSS2/selector.html
p+p{
//styling the code
}
p+p{
} simply mean find all the adjacent/sibling paragraphs with respect to first paragraph in DOM body.
<div>
<input type="text" placeholder="something">
<p>This is first paragraph</p>
<button>Button </button>
<p> This is second paragraph</p>
<p>This is third paragraph</p>
</div>
Styling part
<style type="text/css">
p+p{
color: red;
font-weight: bolder;
}
</style>
It will style all sibling paragraph with red color.
final output look like this