This question already has answers here:
CSS Child vs Descendant selectors
(8 answers)
Closed 8 years ago.
div > p {
background-color: yellow;
}
doesn't appear to evaluate any differently than
div p {
background-color: yellow;
}
But would there be an effect I am unaware of? It seems that using the > is more proper style, at least.
There is a difference; > is "immediately follows". So your div > p would apply to the p here:
<div>
<p>Text here</p>
</div>
but not here:
<div>
<table>
<tr>
<td>
<p>Text here</p>
</td>
</tr>
</table>
</div>
A more detailed description can be found within the CSS specification for child selectors.
Look at this example it might help you ...
div#container > ul {
border: 1px solid black;
}
.......
<div id="container"> <ul>
<li> List Item
<ul>
<li> Child </li>
</ul>
</li>
<li> List Item </li>
<li> List Item </li>
<li> List Item </li> </ul> </div>
A selector of #container > ul will only target the uls which are direct children of the div with an id of container. It will not target, for instance, the ul that is a child of the first li.
For this reason, there are performance benefits in using the child combinator. In fact, it's recommended particularly when working with JavaScript-based CSS selector engines.
.......
Read this : http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
it will help you .
div > p selects the direct child p (only the sons),
div p selects all its children p, now matter how deep it is in the hierarchy (including the grandsons and great grandsons).
div>p
indicates a P which is a DIRECT child of div
div p
indicates a p that is descendent of div, not
Check Fiddle for example.
The > selector is used to select child elements of a particular elemnent.
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed last year.
how to specify CSS for an element without any grandchild elements? e.g.,
<div class="foo">
<ul></ul>
</div>
<div class="foo">
<ul><li></li></ul>
</div>
// hide the <div> whose child <ul> is empty, how?
div.foo {
display: none;
}
Hey there is :empty selector in css which allows you to do like this.
Javascript method to get what you asked for
But If you want to hide other things you should use javascript
:has is experimental
A simple way of doing this
let text = document.querySelector("div.foo > ul");
if(text.innerHTML == ""){
// set your things
document.querySelector("div.foo").style.display = "none";
// you can delete this thing too but this is just an examplee
}
using :empty selector
If you don't wanna use javascript then this method is also good
Simply use
div > ul:empty{
display:none; // or any styles that you can see
}
For just illustration purpose :
div.foo > ul{
background-color:blue;
height:30px;
}
div.foo > ul:empty{
display:none;
}
<!-- Below is empty ul -->
<div class="foo">
<ul></ul>
</div>
<!-- Below is non empty ul -->
<div class="foo">
<ul>
<li>This is with text</li>
</ul>
</div>
But be carefull
Empty elements are elements that have nothing in them. It cannot even have a whitespace.
There is something called :blank but it is experimental as far as I know.
This question already has answers here:
CSS '>' selector; what is it? [duplicate]
(7 answers)
What does the "+" (plus sign) CSS selector mean?
(9 answers)
Closed 5 years ago.
When using CSS, I can query elements in the following ways:
div > .class
div .class
div + .class
However I can't quite tell the exact difference between each of these DOM queries. Do they all point to child elements? I know that ">" and " " (space) do.
But under what circumstances would I use each?
In CSS these are called Combinators and means three different things:
div > .class: is called Child selector and will select all elements that are direct children of a div and have the class .class.
div .class: is called Descendant selectors and will select all elements inside a div and having the class .class.
div + .class: is called Adjacent sibling selector and will match any element that immediately follows a div and have the class .class.
Example:
In the following example:
<div>
<p class="test">
<a href="#" class="test">
Testing link</a>
<img class="test"/>
</p>
<span class="test">A span</span>
</div>
<h4 class="test">A title</h4>
div > .test will match only <p> and <span> elements.
div .test will match <p>, <a>, <img> and <span> elements.
div + .test will match only <h4> element because it follows the <div> immediately.
Demo:
div .test {
background: yellow;
}
div>.test {
background: red;
}
div+.test {
background: green;
}
<div>
<p class="test">
Pragraph
<a href="#" class="test">
link</a>
<img class="test" width="50px" height="50px" />
</p>
<span class="test">Span</span>
</div>
<h4 class="test">Title</h4>
This question already has answers here:
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 8 years ago.
These two Selectors:
.class>li>a{}
and
.class li a{}
are doing exactly same job for me so can some one please tell me what is the benefit of using > ?
Thanks
It makes the selector more specific.
The first selector only targets an anchor tag that is a child tag of a lst item that is a child tag of a CLASS.
<div class="fo">
<li>
<a>
the second select will target all anchor tags that are a descendant of a list item which is a descendant of a specific class.
<div class="fo">
.....
<li>
.....
<a>
where .... can be any other dom element
With the selector > you focus on the immediate chidlrens
<div class="class">
<ul>
<li>text</li>
</ul>
</div>
With this part of code, the selector .class>li>a{} won't work cause the child of .class is "ul". But .class li a{} will work cause it check all in the selector tree.
<ul class="class">
<li>text</li>
</ul>
Will work with your .class>li>a{} cause they are all immediate children.
Another exemple, if you have this html code
<div id="section">
<span>some text</span>
<div class="subSection">
<span>some text</span>
</div>
</div>
The selector #section>span will apply to the first span only.
The selector #section span will apply to all spans in the id section.
This question already has answers here:
CSS selector for first element with class
(23 answers)
Closed 8 years ago.
I have an aside with two <div class="sku"> elements. I'm trying to use CSS to manipulate the :first-child but it doesn't work. However, when trying to access the :last-child it does.
JSFiddle
HTML
<aside>
<h1>Product Name</h1>
<div class="sku">
<h3>
100 – Small
</h3>
<div class="dimension">
<ul>
<li>
<span class="title">
Product Dimensions
</span>
<span class="specs">
23.75w
x
17.75h
x
28d
</span>
</li>
</ul>
</div>
</div>
<div class="sku">
<h3>
200 – Large
</h3>
<div class="dimension">
<ul>
<li>
<span class="title">
Product Dimensions
</span>
<span class="specs">
29.75w
x
17.75h
x
28d
</span>
</li>
</ul>
</div>
</div>
</aside>
CSS
.sku:first-child {
display:none !important; /*doesn't hide the first child*/
}
.sku:last-child {
display:none !important; /*does hide the first child*/
}
Why won't :first-child select the first div?
You cannot use :first-child psuedo class since .sku is not the first child. A better option is to use either :first-of-type (for first child) or :nth-of-type (which can accept a number or an equation) pseudo classes:
.sku:nth-of-type(1) {
display: none;
}
Updated Demo
The :first-child means the first child. Which is in this case the H1. So this does not work. You can use:
h1 + .sku { }
But only if this is the order you place your HTML.
so I have been trying all this stuff with first-child and everything and none seem to be working. If I have a div set up as such:
<div class="content">
<div class="thing">
abd
</div>
<div class="thing">
</div>
<div class="thing">
123
</div>
<div class="thing">
<li class="list" goal="target">
1
</li>
</div>
<div class="thing">
<li class="list">
2
</li>
</div>
<div class="thing">
<li class="list">
3
</li>
</div>
<div class="thing">
<li class="list">
4
</li>
</div>
</div>
what line of css that will be able to target only the first li element in the .content div (the one with the attribute goal="target")
now this can be fairly messy and there can be anywhere from 0 to 10 divs without a li before the first that contains one.
I have tried nearly anything with first-child, but it always targets every single li because they are in divs.
here is a jsfiddle if you want to try things
In CSS the format is grandparent parent element child... and :nth-child gives you the element the number specified down, so for your case that would be
.content .thing:nth-child(4) li {
/* CSS goes here */
}
In your example .content is the grandparent, .thing (the fourth one) is the parent, and of course the li is the element. Spaces are required for distinguishing in between levels in CSS.
Here is a working jsFiddle
Edit Without it being hard coded it's impossible to select the first li no matter who it's parent is without javascript.
Here is a jQuery fix:
$('.content').find("li").eq(0).css({ /* CSS goes here */});
Here is a straight javascript fix:
var elems = document.getElementsByTagName('li')[0];
elems.style.property="value";
OK first things first, goal is an invalid attribute so you shouldn't be using it. If you need custom attributes you should be using data-attributes
In order to target an element by attribute you should be using an attribute selector in your case the following selector would work.
li[goal="target"]{
/* Your styles go here.*/
}