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;
}
Related
This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 5 years ago.
Despite limiting the :last-of-type to a certain div, when I add another div under that div, the :last-of-type class is suddenly canceled. Is there a reason why?
.container {
width: 400px;
border-bottom: 1px solid #111;
}
.container:last-of-type {
border-bottom: 0;
}
<div class="entry">
<div class="container">
{block:Posts} ....... {/block:Posts}
</div>
<div class="pagination">....</div>
</div>
Using this code, if I removed the .pagination div, the :last-of-type works normally and removes the border-bottom.But if I add the .pagination div, suddenly the :last-of-type doesn't work even though the .pagination div isn't included in the container class.
Is there a way to fix it? Or to select the last div of the .container div without having the .pagination class affecting it?
You’re selecting .container, not the last of its children. The form .container:last-of-type selects anything of class .container that is the last of its type. By inserting a space, which is the generic descendant selector, or a right angle bracket (>), which is the direct descendant selector, you’re now selecting the last of a given type within any element of class .container.
.container > :last-of-type
This may not be your best option, though. You should consider whether last-child makes more sense. For example, if you introduce elements of different a types at some point, the last of each type will be selected.
last-of-type refers to the element type (in this case div), not to the class, so it won't work the way you expect it, but will select the .pagination DIV, which is the last DIV inside the container element.
However, if the last .container div is always the second last DIV in there (only followed by the .pagination div, you can use :nth-last-of-type(2):
.container {
width: 400px;
border-bottom: 1px solid #111;
}
.container:nth-last-of-type(2) {
border-bottom: 0;
}
<div class="entry">
<div class="container">
container content
</div>
<div class="container">
container content
</div>
<div class="container">
container content
</div>
<div class="container">
container content
</div>
<div class="pagination">....</div>
</div>
I was introduced to the following code:
<!DOCTYPE html>
<html>
<head>
<style>
span {
color: blue;
border: 1px solid black;
}
.extra span {
color: inherit;
}
</style>
</head>
<body>
<div>
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>
<div class="extra" style="color:green">
Here is <span>a span element</span> which is green, because it inherits from its parent.
</div>
<div style="color:red">
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>
</body>
</html>
Link: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_inherit
I'm not sure why the colour of the extra span is green. When they use the 'inherit' value, do they take a colour similar to the first one introduced? Is that what it is?
What's the 'parent' and 'child' referring to here? What's their definition?
If we have a <p> inside a <div> element, the <div> is the parent of the <p> and the <p> is the child of the <div>
<div>
<p></p>
</div>
You can read this web: https://www.w3schools.com/js/js_htmldom_navigation.asp it explains perfectly.
The nodes in the node tree have a hierarchical relationship to each other.
The terms parent, child, and sibling are used to describe the relationships.
In a node tree, the top node is called the root (or root node)
Every node has exactly one parent, except the root (which has no
parent)
A node can have a number of children
Siblings (brothers or sisters) are nodes with the same parent
CSS uses this structure to make specific selectors like first-child, :nth-child(n), :last-child...
You can see all CSS selectors here
The value inherit of a CSS attribute applied to an HTML node, simply takes the parent value of the attribute.
So if I have an html like this:
<div>
<p></p>
<p class="red"></p>
</div>
And css like:
div {
background-color: red;
}
div > p {
background-color: blue;
}
.red {
background-color: inherit;
}
The div with the red class, using inherit will take the value red of the parent.
Since the <span></span> elements are nested within their 'parent' <div></div> elements, they are said to be 'children' of the 'parent' div.
<div id="parent">
<span id="child1"></span>
<span id="child2"></span>
<span id="child3"></span>
</div>
The 3 spans are children of the parent div, and siblings of each other. Much like a family. When a child inherits styles from its parent, it uses the same style as its parent uses for that particular style.
color: inherit;
means that when assigning the span its color, it will defer to whatever the parent color is, which in this case was green.
inherit summary: from https://developer.mozilla.org/en/docs/Web/CSS/inherit
The inherit CSS-value causes the element for which it is specified to
take the computed value of the property from its parent element. It is
allowed on every CSS property.
Brake down your code to single parts to understand what's going on like:
span {
color: blue;
border: 1px solid black;
}
This means every span has a blue color.
Moving on to next lines:
.extra span {
color: inherit;
}
This means every span inside an element with a class="extra" will inherit the color. Means all the <span>s inside .extra will take it's parent color.
Now as you see in your result every span has blue color, except the one inside the div with class extra which has an inline style on color saying it is green.
In this, you have used both Internal and Inline styling at the same time. Since Inline styling has the highest precedence over Internal and External Styling that is why that extra span turns out to be Green.
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/
Let's say my html looks like this:
<div class="container">
<... some html here ...>
</div>
I want to get the first direct child of .container.
I could do .container > div:first-child but that's assuming the it is a div which is not always the case.
Use the :first-child pseudo-class without a tagname:
.container > :first-child
This will grab any element that is the immediate first child, regardless of its tagname. This is similar to the way in which we use other pseudo-classes such as :hover which alone targets any element, while a:hover targets only the hover state of anchors.
Not using the element itself, but a class is a better solution and way more semantic for so many reasons.
And give the class to the children of the element, not only the container like this:
HTML:
<article class="container">
<p class="blah">First paragraph...</p>
<p class="blah">Lorem ipsum...</p>
<p class="blah">Dolor sit amet...</p>
</article>
CSS:
.blah {
background: red;
color: white;
}
.blah:first-child {
background: #000;
}
You can see it in action here: http://jsfiddle.net/Roobyx/ygP4B/
I have this code.
<div class="myDiv">
<div>
I want to be red.
</div>
</div>
<p>I'm some other content on the page</p>
<div class="myDiv">
<div>
I want to be blue.
</div>
</div>
.myDiv div:nth-child(odd) {
color: red;
}
.myDiv div:nth-child(even) {
color: blue;
}
I see why it's not working. It's making every odd div within myDiv be red. What I want it to do is make every odd example of a div within myDiv be red. How can I write that?
Here's a JSFiddle.
There are a couple of problems here. The :nth-child is on the wrong element. The inner divs are always the first child, so the :nth-child(odd) selector works for both. Instead move to
.myDiv:nth-child(odd) div
...however this does not work either because of the <p>. A working solution with your sample is
.myDiv:nth-of-type(odd) div
http://jsfiddle.net/tvKRL/1/
NOTE that the nth-of-type only works because the .myDiv elements are all divs (it's based on the element, not the selector), so the selector ignores the <p>. If there can be another div between .myDivs I don't think any CSS will work for what you want to do.
You can't do this generically, for the reason given by Domenic. To put it simply: there's no selector that lets you filter an existing subset of matched elements.
On the off chance that among your p and div.myDiv siblings the only div elements are the ones with that class anyway, then you could use :nth-of-type() to have it look at those intermediate divs only:
div.myDiv:nth-of-type(odd) div {
color: red;
}
div.myDiv:nth-of-type(even) div {
color: blue;
}
Or if there are other divs without that class which should be excluded, then unless there is some sort of pattern in which they're laid out, you're out of luck.
This is not possible. There is no CSS selector that will do what you want, as you can see by perusing the complete list of selectors.
In general CSS selectors do not "reach out" to encompass elements above the DOM tree of the one selected. You are asking for something even more sophisticated than that, combining characteristics of parent elements with ordinal properties of the targeted elements, even though those targeted elements are distributed among entirely different places in the DOM tree.
Just applynth-childto the first member of the descendant selector, not the last one.
div:nth-of-type(odd) > div {
color: red;
}
div:nth-of-type(even) > div {
color: blue;
}
<div class="myDiv">
<div>
I want to be red.
</div>
</div>
<p>I'm some other content on the page</p>
<div class="myDiv">
<div>
I want to be blue.
</div>
</div>