I need to create a class that only applies to the holder-left inside the holder, and not to the one outside the holder.
<div class="holder">
<div class="holder-left">
</div>
<div class="holder-right">
</div>
</div>
<div class="holder-left">
</div>
div.holder {
margin: 10px 10px 0 10px;
width: 1002px;
}
How can I do that?
With a child selector:
div.holder > .holder-left
Or a descendant selector:
div.holder .holder-left
The child selector will match .holder-left elements that are direct children of div.holder elements. The descendant selector will match .holder-left elements that are descendants (they could be grandchildren, for example) of div.holder elements.
Try this:
div.holder .holder-left
{
}
Related
I'm trying to achieve a scenario that a css rule should be applied to all selectors except one selector and whatever underneath it.
For example I want to apply the css on everything inside .parent but not including .child and its children.
I tried the following, but didn't work...
.parent *:not(.child *) {
background-color: red;
}
<div class="parent">
<div class="child">
<div>inside</div>
<div>inside2</div>
</div>
<div>outside</div>
</div>
You can target the child class with its own rule using "unset" or "initial" or another reasonable default value:
.parent {
background-color: red;
}
.child {
background-color: unset;
}
This should target any direct child of .parent that doesn't have the class of child as well as its descendants:
.parent> :not(.child),
.parent> :not(.child) * {
background-color: red;
}
<div class="parent">
<div class="child">
<div>inside</div>
<div>inside2</div>
</div>
<div>outside</div>
<div>
<div>outside!</div>
</div>
</div>
Why your selector didn't work
.parent *:not(.child *) {
background-color: red;
}
<div class="parent">
<div class="child">
<div>inside</div>
<div>inside2</div>
</div>
<div>outside</div>
<div>
<div>outside!</div>
</div>
</div>
Target any descendant of .parent that doesn't have the child class.
While yes you aren't assigning the background-color to .child, you're assigning it to both of its children...
But I specified all descendants of .child within :not()
As with :is(), default namespace declarations do not affect the compound selector representing the subject of any selector within a :not() pseudo-class, unless that compound selector contains an explicit universal selector or type selector. (See :is() for examples.)
https://www.w3.org/TR/selectors-4/#negation
I'm still trying to fully understand this part of the spec myself, but I think it just means that you can't do compound selectors within the :not() pseudo class
I have specific type of boxes in my HTML that have, let's say margin: 10px; to all of them. They are displayed in a row on the page (using Bootstrap) and I want to remove the left margin of the first element and the right margin of the last element. I could use :first-child or :first-of-type and their respective lasts but the elements are not siblings and they do not have a common parent. The HTML looks something like this:
<div class='container'>
<div class='col-md-2'>
<div class='MY-CUSTOM-BOX'>
</div>
</div>
<div class='col-md-5'>
<div class='MY-CUSTOM-BOX'>
</div>
</div>
<div class='col-md-5'>
<div class='MY-CUSTOM-BOX'>
</div>
</div>
</div>
:first-of-type applies to all boxes, not sure how to approach the :first-child because of the nested divs. Any ideas?
It looks like you could use a combination of css selectors to achieve this, namely the > as well as :first-child and :last-child
:first-child > .MY-CUSTOM-BOX {
margin-left: 0;
}
:last-child > .MY-CUSTOM-BOX {
margin-right: 0;
}
This selects the direct MY-CUSTOM-BOX descendants of any first and last child elements.
That should work where the boxes have the same level of parent (i.e. container -> div -> MY-CUSTOM-BOX)
You could also do it the other way round which may give you better results depending on how nested you are:
.container > :first-child .MY-CUSTOM-BOX {
margin-left: 0;
}
.container > :last-child .MY-CUSTOM-BOX {
margin-right: 0;
}
This selects the first and last child of container and then gives any MY-CUSTOM-BOX elements inside it margin left/right of 0.
Here's a (relatively crude) fiddle demonstrating both examples: https://jsfiddle.net/ttakchr1/
I'd like have a margin on an element, on the right if the element is the first element of the parent <div>, or on the left if the element is the last element of the parent <div>.
The thing is, there is no other element in the <div>, only plain text.
Here's where I am:
HTML:
<div class="parent">
<i>→</i>Action
</div>
<div class="parent">
Action<i>←</i>
</div>
CSS:
.parent i:first-child {
margin-right: 5px;
}
.parent i:last-child {
margin-left: 5px;
}
With the first selector I'm trying to target the first <div>, and with the last selector I'm trying to target the last <div>.
But actually since <i> is the only child element, both rules apply to this element.
See fiddle.
Is there a way I can select the <i> that is at the beginning or the end of the parent, without modifying the markup? (Adding a <span> to wrap the text is not the solution I'm looking for...)
Based on this question, and on the comments on my original question here, it seems that there is no way to achieve text node selection in CSS.
Therefore to address my issue I have to wrap my text node in an inline element, like <span>, in order for my :first-child and :last-child selectors to work as expected.
See updated fiddle
<div class="parent">
<i>→</i>Action
</div>
<div class="parent">
Action<i>←</i>
</div>
<div class="clearfix"></div>
.parent {
float: left;
}
.parent:first-child {
margin-right: 5px;
}
I'd like to add a margin-top:5px to a subset of classes in the following:
This part is wrong:
.af-mh-container-1011.af-row{
margin-top: 5px;
}
with this html:
<div class='af-mh-container-1011'>
<!-- add to this one -->
<div class='af-row'>
here i am
</div>
</div>
<div class='af-mh-container-not-1011'>
<div class='af-row'>
here i am
</div>
</div>
.af-mh-container-1011.af-row selector tries to match an element having both af-mh-container-1011 and af-row classes.
In order to select the nested child <div> having af-row class, you could use direct descendant combinator A > B as follows:
.af-mh-container-1011 > af-row {
margin-top: 5px;
}
Also A B would match the nested B which is a descendant of A element - and not necessarily a direct descendant or a child.
Probably you missed a space between the dot -
.af-mh-container-1011 .af-row{
margin-top: 5px;
}
JSFIDDLE - http://jsfiddle.net/zgf0v0tn/
What you have written is applying a margin to an element with both those classes.
You want to target child elements.
Here are a few options:
.af-mh-container-1011 > .af-row {
margin-top: 5px;
}
.af-mh-container-1011 .af-row {
margin-top: 5px;
}
.af-mh-container-1011 div {
margin-top: 5px;
}
All three options will affect your af-row class. The first option is a child selector. This will only affect the direct child. Other divs nested within the .af-row won't be affected. The second option will affect your af-row and any element nested within .af-row with the same class. The last option will affect all divs within af-mh-container-1011. See the example below for further clarification.
<div class='af-mh-container-1011'>
<div class='af-row'>
<div class='af-row'>
This nested element is unaffected by a child selector (first option) but is affected by a decendant selector (second option). It is also affected by the 3rd option.
</div>
</div>
</div>
Assuming I wanted to attribute the text-shadow: green; attribute to every <h2> element occouring inside an element with the classes .dark and ux-bannerwhat CSS code would achieve this?
<div class="dark ux-banner">
<div class="the attributed classes of this element will vary">
<h2>TARGET THIS ELEMENT
</h2>
</div>
</div>
As in the above example <h2> element will be wrapped in a <div> with varying classes attributed to it.
What would be the best way to apply the text-shadow: green; property to the <h2> element when occouring within elements that have the .dark and ux-banner classes attributed without making reference to the <div> immediately surrounding the <h2> element
I believe you're looking for:
.dark.ux-banner h2 {
text-shadow: green;
}
That means: "Set text-shadow: green on all h2 elements that are descendants of an element with both the classes dark and ux-banner.
Alternately, if you want to be somewhat specific:
.dark.ux-banner div h2 {
text-shadow: green;
}
(Only applies to h2 elements within div elements within .dark.ux-banner elements.)
Or hyper-specific:
.dark.ux-banner > div > h2 {
text-shadow: green;
}
(Only applies to h2 elements that are direct children of div elements that are direct children of .dark.ux-banner elements.)
The key bit above is really that .dark.ux-banner (with no spaces) means "an element with both of these classes." The rest is just descendant or child combinators.
You will need
.dark.ux-banner h2{
text-shadow:green;
}
What this does is selects the elements that have the class .dark then checks if it has the class .ux-banner then selects all h2 inside that
.dark.ux-banner h2 { text-shadow:green; }
http://jsfiddle.net/YjGhw/
Here is the demo http://jsfiddle.net/tFScD/2/
<div class="demo">
<div class="the attributed classes of this element will vary">
<h2>TARGET THIS ELEMENT
</h2>
</div>
</div>
.demo div h2{
text-shadow:2px 2px green;
}
It's simple. Just use the following:
.dark.ux-banner h2 {
text-shadow:green;
}
This means every h2 element inside an element with these classes will have the text-shadow:green propperty no matter if the h2 element is inside a div or not.
<div class="dark ux-banner">
<div class="the attributed classes of this element will vary">
<h2>
TARGET THIS ELEMENT
</h2>
</div>
</div>
or
<div class="dark ux-banner">
<h2>
TARGET THIS ELEMENT
</h2>
</div>
will work the same ;)
.dark.ux-banner h2{
text-shadow:0 0 4px green;
}
the markup
<div class="dark ux-banner">
<div class="the attributed classes of this element will vary">
<h2>TARGET THIS ELEMENT
</h2>
</div>
</div>
demo: http://jsfiddle.net/cQcbp/