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>
Related
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 want to simply add a border-bottom to the last .slab
I tried a few things and I am unable to understand what is going on.
Case 1 - use .wrapper:last-child
If I try this on codepen.io or on Stackoverflow snippets, I don't get a border-bottom on last .slab
If I try this on JSFiddle or run the code separately in Chrome, I get a border-bottom on last .slab. However, if I uncomment <div class="something">New</div>, then the border-bottom on last .slab vanishes in both JSFiddle and on Chrome.
.wrapper {
width: 10em;
margin: 1em;
}
.wrapper:last-child {
border-bottom: 1px solid #999;
}
.slab {
background-color: #eee;
border-top: 1px solid #999;
padding: 1em;
}
<div class="wrapper">
<div class="slab">Hello</div>
<div class="slab">Hello</div>
<div class="slab">Hello</div>
</div>
<!--<div class="something">New</div>-->
Case 2 - use .slab:last-child
Turns out this works everywhere - JSFiddle, Chrome, codepen.io and on Stackoverflow. But I thought the selection was really for the last-child of .slab and not the last .slab
.wrapper {
width: 10em;
margin: 1em;
}
.slab {
background-color: #eee;
border-top: 1px solid #999;
padding: 1em;
}
.slab:last-child {
border-bottom: 1px solid #999;
}
<div class="wrapper">
<div class="slab">Hello</div>
<div class="slab">Hello</div>
<div class="slab">Hello</div>
</div>
Questions:
Does .slab:last-child mean the last child of .slab or the last occurrence of .slab ?
In case 1, why is the border-bottom vanishing after the introduction of an unrelated element .something ?
What is the best way to apply border-bottom to the last .slab ?
Does .slab:last-child mean the last child of .slab or the last occurrence of .slab ?
Neither. It matches an element that
has the "slab" class, and
is the last child of its parent.
The last .slab within its parent may not necessarily be its last child. .slab:last-child will match if and only if both conditions are true for the given element.
In case 1, why is the border-bottom vanishing after the introduction of an unrelated element .something ?
Because then the last child of the parent of .wrapper becomes that other element. This element isn't unrelated to .wrapper — it's related to it by way of being its next sibling.
The .slab elements within that wrapper never receive a border; the border is being applied to the .wrapper for as long as it is the last child of its parent. (Incidentally, the parent of .wrapper in your examples is implied to be body.)
What is the best way to apply border-bottom to the last .slab ?
You won't be able to do this reliably unless you can guarantee that the only possible children of .wrapper are .slab elements, in which case the class name then becomes quite irrelevant (but you can still include it in your selector so you avoid matching the last child of .wrapper when it's not a .slab).
last-child means exactly what is says...the very last element that is a child of a parent.
Not the last of class...the last element.
There is no last-of-class selector.
This: .slab:last-child means the last child that also has a class of .slab.
If it's not the last-child it won't apply and, equally, if it doesn't have a class of .slab it won't be selected.
The :last-child structural pseudo-class selector applies to siblings of a parent. It is equivalent to :nth-last-child(1),
In terms of your code, you would apply :last-child to .slab to select the last sibling of parent div.wrapper.
If the last child of div.wrapper did not have a slab class, then the selector wouldn't match. It would do nothing.
If the :last-child were applied to the div children of div.wrapper, like this:
.wrapper > div:last-child { ... }
... then the selector would match the last child regardless of the class, id or other attributes. It would match any div. If the last child was not a div, the selector would do nothing.
If you wanted to match the last child of div.wrapper, regardless of anything – meaning it just needs to be the last child – then you could do something like this:
.wrapper > *:last-child { ... }
Without the > child combinator, let's say .wrapper *:last-child { ... }, the last child of all descendant parent elements would be matched.
When you select .wrapper:last-child, you're targeting the element with class wrapper that is the last child of its parent (presumably body, in this case).
If div.wrapper is the only child of its parent, then :last-child, :first-child, :only-child and most other structural pseudo-class keyword selectors would match.
For a better understanding of these selectors (and all others), refer to this section of the CSS spec:
http://www.w3.org/TR/css3-selectors/#selectors
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;
}
Is there a way to select the first element with a some class after n elements? For example in the following HTML, I want to be able to select only the first div that has CSS class apple after the 5th div, resulting in the 7th div element being selected.
<div>
<div class="data-class">1</div>
<div class="data-class">2</div>
<div class="data-class">3</div>
<div class="data-class apple">4</div>
<div class="data-class">5</div>
<div class="data-class">6</div>
<div class="data-class apple">7</div>
<div class="data-class apple">8</div>
<div class="data-class">9</div>
<div class="data-class apple">10</div>
</div>
This selector selects all the divs, but I only want the first: .data-class.apple:nth-child(n+5)
And this one doesn't even work: .data-class.apple:nth-child(n+5):first-child
I have put the HTML and CSS samples here.
UPDATE
Current CSS selectors
.data-class{
background-color: #0ea;
padding: 10px;
margin-bottom: 5px;
border: 1px solid #444;
}
.data-class:nth-child(n+5)+.apple{
background-color: #f0f;
}
To select an element appearing after some other element, use the ~ combinator:
.data-class:nth-child(5) ~ .data-class.apple {
background-color: #f0f;
}
You won't be able to match only the first .apple that occurs using just one selector. You will need to create another rule to undo the styles that you apply for subsequent .apple elements:
.data-class:nth-child(5) ~ .data-class.apple ~ .data-class.apple {
background-color: #0ea;
}
This technique is explained here.
it is better to say having css class, not having css.
I couldn't find the appropiate selector strictly.
Instead of this, you could use jquery and write javascript function which
use for loop from 5th child until it finds class containing apple. You may use jquery n-th-child to select child in loop and hasClass to determine if it contains apple.
Therefore select result by passing result to n-th-child function.
It uses this test:
div > .data-class.apple, .data-class{.....}
or another use:
div > .apple:not(.data-class){.....}
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
{
}