This question already has answers here:
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 3 years ago.
This is a basic question, but I cant find answer anywhere. So do you guys know what does > do within CSS?
.row > div > div {
height: 100%;
width: 100%;
}
It is immediate child selector.
https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator
It's mean (children of). So in your code, that line means: Get the div element that has a parent div, and the parent div has a parent element that has a class named "row".
Related
This question already has answers here:
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed 4 years ago.
I'm using a CMS(Joomla), and they allow me to put a class for a tag and then I can modify the css for just that particular page.
I'm trying to use MDN to find the answer but I couldn't exactly get it to work the way I wanted.
Here is the JSFiddle they had on their page, I was messing around with it:
https://jsfiddle.net/amvz5dkb/13/
<div class="divclass">
<span class="spanclass">Span #1, in the div.
<span="betterspanclass">Span #2, in the span that's in the div.</span>
<span="betterspanclass">Span #3, in the span 1.</span>
</span>
</div>
<span>Span #4, not in the div at all.</span>
And here is my CSS
.divclass > .betterspanclass {
background-color: red;
}
This doesn't work, only
.divclass > span {
background-color: red;
}
Seems to have an effect but it doesn't affect span 3 at all, only span 1 and span 2. I want to make the background red for every betterspanclass inside divclass. Is this possible?
This question already has answers here:
How to skip first child?
(5 answers)
Closed 7 years ago.
Does CSS make possible selecting all the child elements except a first child?
Yes, using :not(:first-child)
parent child:not(:first-child) { /* style */ }
Example:
div span:not(:first-child) {
color: red;
}
<div>
<span>A</span>
<span>B</span>
<span>C</span>
</div>
Just use the :nth-child selector:
:nth-child(n+2) {}
It will select all children starting with the second one. Or, if all children have the same class (or element tag) you can also use
#parent .class + .class {}
#parent div + div {}
You can use div:not(:first-child).
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 7 years ago.
I have DOM like this
<div class="outer">
<div class="inner">
</div>
</div>
and corresponding CSS is like
.outer {
width: 700px;
}
, where inner could by typeA, typeB.....
Later I found that I want to enlarge outer when particular typeX show up, but
.outer .typeX {
width: 90%;
}
will apply style width: 90% to .typeX div not .outer div. How do I solve this? Is it possible in pure CSS? (Assume .outer is fixed since it is generated by other library)
Unfortunately, what you are looking for would be a parent selector, which does not yet exist in CSS.
Maybe someday (e.g., in Selectors Level 4).
This question already has answers here:
Is there a CSS selector for the first direct child only?
(8 answers)
Closed 8 years ago.
We're trying to control vertical spacing on content and have everything working great except when content follows a div - consider the following:
<div>
<ul>
<li></li>
</ul>
</div>
We'd like to remove top margin from all ul's that immediately follow a div so have been trying:
div + ul {
margin-top: 0;
}
Is this the proper use for this selector?
We just can't seem to get it working - any pointers in the right direction would be much appreciated.
Cheers
Ben
It has the word "adjacent" in it, this means "next to": your ul is not "next to" your div (on the same hierarchical level) but inside it.
What you want is a direct (not recursive) child selector, > so:
div > ul { ... }
And if it only happens to the first child of that div:
div > ul:first-child { ... }
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
Is this possible with css only? I have the following:
<div class="container">
<img src=#>
</div>
How do I get .container to have a box-shadow (and other styling) when and only when img is in the state :hover?
As people have stated there is no CSS parent selector, for a number of good reasons as stated in the linked duplicate question.
However, with the code you've shown, you can just apply the hover pseudo-selector to your parent element and it will achieve almost the exact same functionality.
So this:
div:hover{
border:1px solid red
}
Would work only because you have a single child, and would have the issue that if you hover adjacent to the img but not directly on it the parent will still have styles applied because its a block element.
You can convert it to inline-block to limit this, like so:
div{
display:inline-block;
}
div:hover{
border:1px solid red;
}
However, this will have implications for how other sibling elements to the parent flow.
You can use jQuery:
$("span").hover(
function () {
$(this).parent().addClass("add-class");
},
function () {
$(this).parent().removeClass("add-class");
}
);
Here is the demo http://jsfiddle.net/Sv6Av/
You can replace span with another tag such as img
Nope. No parent selector in css yet. You will have to resort to js for now. For more explanation read this