I have this html:
<div class="leading-4">
<h2>title</h2>
<p>one para</p>
<p>Maybe another para</p>
<p><ul><li>.....</li></ul></p>
<h4>text</h4>
</div>
I want to edit the p that has the ul in it -
I thought about
.leading-4 p:nth-last-child(1){
}
and
.leading-4:nth-last-child(1){
}
but it doesn't' work either (though I didn't think it would)
What am i doing wrong please
What you want is last-of-type.
But as Praveen says you should fix your HTML. Use the W3C validator when in doubt.
You cannot have a <ul> inside a <p> tag! So when you put <p><ul></ul></p>, the browser considers it as <p></p><ul></ul>.
So technically, there's and cannot be <ul> inside a <p> so your CSS selector never ever selects an element under any case in HTML.
So, consider changing the element to <div> instead.
Proof:
p {color: red;}
ul {color: blue;}
p ul {color: green;}
<p>This is para</p>
<p>
The next UL element will be kicked out of P. Before UL.
<ul><li>This is LI inside UL inside P</li></ul>
After UL. And this becomes normal text under the body, and not under P.
</p>
<ul><li>This is LI inside UL</li></ul>
References:
ul element can never be a child of p element
is it acceptable to put a UL inside of a paragraph??
Solution:
The solution for selecting the last <p> for you would be:
p:last-of-type { /* rules */}
Related
Considering this markup:
<div id="container">
<div id="mainmenu">
<ul>
<li> <h1>My Dashboard</h1></li><br>
<li> <h1>About</h1></li><br>
<li> <h1>Contact</h1></li><br>
<li> <h1>Setttings</h1></li><br>
<li> <h1>Log Out</h1></li><br>
</ul>
</div>
</div>
Selecting this way is a valid thing? I am having issues with some properties.
#container ul li{
display: inline-block;
}
#mainmenu ul li a{}
#mainmenu ul li a:hover{}
full sample:
https://jsfiddle.net/jhr1q1q4/
I'm somewhat unsure what you're asking...
Strictly speaking, the selectors you provided are valid and would select the <a> elements within your #mainmenu element.
But I would ask: is the ul li part of the selectors necessary? You could rewrite both of them as
#mainmenu a {}
#mainmenu a:hover {}
and they would work the same and require less parsing. If you wanted to only select <a> elements that are descendants of <li> elements, you could keep the li in your selector; however, the ul is not necessary -- it is implied your <li> elements will be children of a <ul> (assuming you're writing valid HTML).
Another note: <a> elements are inline, meaning they're meant to act at the text level. <h1> elements, on the other hand, are block-level elements, and thus do not belong inside <a> elements. In fact, you usually shouldn't have more than one <h1> on a page, let alone be using <h1>'s to mark up menu items. If you want your menu items to be big like headers, use your CSS rules to style them that way.
I am having issues with some properties.
What properties are causing trouble?
I'm trying to select the first h1 inside a div with a class called detail_container. It works if h1 is the first element within this div, but if it comes after this ul it won't work.
<style type="text/css">
.detail_container h1:first-child
{
color:blue;
}
</style>
</head>
<body>
<div class="detail_container">
<ul>
<li></li>
<li></li>
</ul>
<h1>First H1</h1>
<h1>Second H1</h1>
</div>
</body>
</html>
I was under the impression that the CSS I have will select the first h1 no matter where it is in this div. How can I make it work?
The h1:first-child selector means
Select the first child of its parent
if and only if it's an h1 element.
The :first-child of the container here is the ul, and as such cannot satisfy h1:first-child.
There is CSS3's :first-of-type for your case:
.detail_container h1:first-of-type
{
color: blue;
}
But with browser compatibility woes and whatnot, you're better off giving the first h1 a class, then targeting that class:
.detail_container h1.first
{
color: blue;
}
:first-child selects the first h1 if and only if it is the first child of its parent element. In your example, the ul is the first child of the div.
The name of the pseudo-class is somewhat misleading, but it's explained pretty clearly here in the spec.
jQuery's :first selector gives you what you're looking for. You can do this:
$('.detail_container h1:first').css("color", "blue");
For that particular case you can use:
.detail_container > ul + h1{
color: blue;
}
But if you need that same selector on many cases, you should have a class for those, like BoltClock said.
you can also use
.detail_container h1:nth-of-type(1)
By changing the number 1 by any other number you can select any other h1 item.
You could wrap your h1 tags in another div and then the first one would be the first-child. That div doesn't even need styles. It's just a way to segregate those children.
<div class="h1-holder">
<h1>Title 1</h1>
<h1>Title 2</h1>
</div>
What is the difference between the following two CSS selectors?
From the explanation here, they sound the same?
div p{}
Selects all p elements inside div elements
div > p{}
Selects all p elements where the parent is a div element.
The difference is depth. What the w3schools site doesn't explain very well is that E>F only matches immediate children of E, while E F matches descendants of any depth.
Using your example CSS, consider the following HTML snippet:
<div>
<p id="paragraph1">I'm paragraph 1</p>
<ul>
<li><p id="paragraph2">I'm paragraph 2</p></li>
</ul>
</div>
The first ruleset, div p, will match both p blocks. The second one, div > p, will only match paragraph1.
div p{}
This one applies to all p inside div
div>p{}
This one says p needs to be a direct descendent of div
/*This one applies to all childrens (`span`) inside parent*/
div span {
color: red;
}
/*This one says child (`span`) needs to be a direct descendent of parent*/
div > span {
color: green;
}
<div>
<!--(`div`) does not represent an obstacle in both selectors-->
<div>
<span>I live in Duckburg.</span>
</div>
<ul>
<li>
<span>I live in Duckburg.</span>
</li>
</ul>
<span>I live in Duckburg.</span><br>
<span>I live in Duckburg.</span>
</div>
This may be a basic question but to me it is still confusing where I can use + or > in CSS.
I see many selectors like li > a or div + span etc. but I am not sure what the difference is and when to use them?
The > sign means select a direct descendant
Example:
CSS
div > ul {
list-style: none;
}
HTML
Here the style would apply to the <ul>
<div>
<ul>
</ul>
</div>
The + sign means select an adjacent sibling
Example:
CSS
p + p
{
font-weight: bold;
}
HTML
Here the style would apply to the latter <p>
<div>
<p></p>
<p></p>
</div>
The selectors are extensively explained in the W3 CSS spec, but here is a digest:
Immediate child selector
The > selector is the immediate child selector. In your example li > a, the rule would select any <a> element that is an immediate child of an <li> element.
The rule would select the anchor in this example:
<ul>
<li>An anchor</li>
</ul>
The adjacent sibling selector
The + selector is the adjacent sibling selector. In your example div + span, the rule would select any <span> elements that is immediately preceded by a <div> element, and where they both share the same parent.
The span element would be selected in this case:
<article>
<div>A preceding div element</div>
<span>This span would be selected</span>
</article>
The > is the direct child selector. In your example of li > a, this will only select <a> tags that are direct descendants of the <li>.
The + means siblings of the selected elements. In your example, div + span would select any <span>s next to a <div> (with the same parent).
li > a would only select a elements that are direct descendants of li elements. div + span would only select span elements that follow a div element.
Read more in #bažmegakapa's link: http://www.w3.org/TR/CSS2/selector.html#pattern-matching
I'm not sure about the + sign but the > sign in css means direct child of, consider this
div > h1 { color: red; }
This will style all h1 tags that are a direct child of a div.
<h1>BLAH</h1>
<div>
<h1>BLAH</h1>
</div>
In that case the first h1 would be left alone, the second because it is a direct child of the div tag would be red.
I'm trying to select the first h1 inside a div with a class called detail_container. It works if h1 is the first element within this div, but if it comes after this ul it won't work.
<style type="text/css">
.detail_container h1:first-child
{
color:blue;
}
</style>
</head>
<body>
<div class="detail_container">
<ul>
<li></li>
<li></li>
</ul>
<h1>First H1</h1>
<h1>Second H1</h1>
</div>
</body>
</html>
I was under the impression that the CSS I have will select the first h1 no matter where it is in this div. How can I make it work?
The h1:first-child selector means
Select the first child of its parent
if and only if it's an h1 element.
The :first-child of the container here is the ul, and as such cannot satisfy h1:first-child.
There is CSS3's :first-of-type for your case:
.detail_container h1:first-of-type
{
color: blue;
}
But with browser compatibility woes and whatnot, you're better off giving the first h1 a class, then targeting that class:
.detail_container h1.first
{
color: blue;
}
:first-child selects the first h1 if and only if it is the first child of its parent element. In your example, the ul is the first child of the div.
The name of the pseudo-class is somewhat misleading, but it's explained pretty clearly here in the spec.
jQuery's :first selector gives you what you're looking for. You can do this:
$('.detail_container h1:first').css("color", "blue");
For that particular case you can use:
.detail_container > ul + h1{
color: blue;
}
But if you need that same selector on many cases, you should have a class for those, like BoltClock said.
you can also use
.detail_container h1:nth-of-type(1)
By changing the number 1 by any other number you can select any other h1 item.
You could wrap your h1 tags in another div and then the first one would be the first-child. That div doesn't even need styles. It's just a way to segregate those children.
<div class="h1-holder">
<h1>Title 1</h1>
<h1>Title 2</h1>
</div>