This question already has answers here:
Is there a CSS selector for the first direct child only?
(8 answers)
Closed 7 years ago.
Is it possible to use parent child:nth-child() and only apply to child's?
The html is the following:
<body>
<div>div 1</div>
<div>
div 2
<div>div 2.1</div>
<div>div 2.2</div>
</div>
</body>
And I wanted to select with CSS: div 1 & div 2, I used:
body div:nth-of-type(1) {
background: red;
color: white;
}
body div:nth-child(2) {
background: blue;
}
But div 2.1 & 2.21 got selected too. JSFiddle
Is it possible to do a non recursive selection? If not I guess the only solution are clases or id's..
You can put a > between body and div to select only direct children of body:
body > div:nth-of-type(1) {
background: red;
color: white;
}
body > div:nth-child(2) {
background: blue;
}
<body>
<div>div 1</div>
<div>
div 2
<div>div 2.1</div>
<div>div 2.2</div>
</div>
</body>
You can use the ">" character to indicate a parent-child selector. Since 2.1 and 2.2 by default are transparent this doesn't solve the coloring problem so you should style them differently:
https://jsfiddle.net/evccpeeL/1/
div {
background: white;
}
body > div:nth-of-type(1) {
background: red;
color: white;
}
body > div:nth-child(2) {
background: blue;
}
You don't actually need to use pseudo-classes here.
You can do this with the direct child selector > alone
body > div {
background: red;
color: white;
}
body > div > div {
background: blue;
color: white;
padding-left: 1em;
}
<body>
<div>div 1</div>
<div>
div 2
<div>div 2.1</div>
<div>div 2.2</div>
</div>
</body>
You might find this article useful The 30 CSS Selectors you Must Memorize
Related
I've got a more theoretical problem. Im perplexed why the width of a div element does not change after I specifically specify it in the class selector ".blue-box".
In the ".float-container div" selector, I have specified the width of a box of 100px, but the ".blue-box" selector does not overwrite it, even though it is a child element of a ".float-container div" selector
<div class="float-container">
<div class="red-box">Box 1</div>
<div class="blue-box">Box 2</div>
<div class="orange-box">Box 3</div>
<div class="yellow-box">Box 4</div>
<div class="green-box">Box 5</div>
<div class="pink-box">Box 6</div>
</div>
.float-container div {
border: 2px solid;
height: 75px;
width: 100px;
}
.red-box {
background: red;
}
.blue-box {
background: rgba(0, 0, 255, 0.493);
text-align: end;
width: 330px;
}
.orange-box {
background: orange;
}
.yellow-box {
background: yellow;
}
.green-box {
background: green;
}
.pink-box {
background: pink;
}
I know how to bypass it. Im just interested in the theory behind it.I am confused why the blue-box inherits the 100px width and does not apply its own 330px width. I know that class is more specific than the div element, so where is the problem?
It's not inheriting the width. The blue box is a subject of the .float-container div selector, which has specificity (0, 1, 1) which beats the specificity of .blue-box which is (0, 1, 0).
The styling from {.float-container div} has more specificity than that of {.blue-box}.
Look at it this way. Let's assume class selectors have a specificity of 10 and element selectors have a specificity of 1.
Then {.float-container div} would have a specificity of 10 + 1 = 11 because it contains both class and element selectors while {.blue-box} would have a specificity of just 10.
You can reference this article if you need more explanations.
https://medium.com/code-writers/understanding-compound-selectors-and-why-to-avoid-them-in-css-d969e60b71dc
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 1 year ago.
Here is what I have, but the boxes are going before the text, need them after
.box {
float: left;
height: 20px;
width: 20px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
<ul>
<li>Red<span class="box red"></span></li>
<li>Green<span class="box green"></span></li>
<li>Blue<span class="box blue"></span></li>
</ul>
Floats are troublesome and usually an outdated approach. Don't use them unless you know why. Here they were doing what a person would expect when set to left, which is to shift their elements to the left side of their containing element.
Also note that span elements are inline. This means they don't have size. Either use divs or set them to inline-block. The float effectively did that for you, but we need to do it ourselves now.
.box {
display: inline-block;
height: 20px;
width: 20px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
<ul>
<li>Red<span class="box red"></span></li>
<li>Green<span class="box green"></span></li>
<li>Blue<span class="box blue"></span></li>
</ul>
This question already has answers here:
How to place two divs next to each other? [duplicate]
(13 answers)
Closed 1 year ago.
I want to make some div blocks to go right after the previous one, but here's what I get: instead of staying next to each other, each block starts from a new line.
div.change {
width: 200px;
height: 200px;
background-color: green;
display: inline-block
}
div.change.one {
opacity: 0.7;
}
div.change.two {
opacity: 0.5;
}
div.change.three {
opacity: 0.3;
}
div p {
text-align: center;
padding: 80px 5px
}
<div class="change">
<div class="change one">
<p>here</p>
</div>
<div class="change two">
<p>here</p>
</div>
<div class="change three">
<p>here</p>
</div>
</div>
You've set the size of the parent element and you've set it to to inline-block, but you need to set those properties on the children only. This is one of the hazards of using the same class for nested elements. You can clear things up with an explicit child selector.
div.change div.change {
width: 150px;
height: 150px;
background-color: green;
display: inline-block
}
div.change.one {
opacity: 0.7;
}
div.change.two {
opacity: 0.5;
}
div.change.three {
opacity: 0.3;
}
div p {
text-align: center;
padding: 80px 5px
}
<div class="change">
<div class="change one">
<p>here</p>
</div>
<div class="change two">
<p>here</p>
</div>
<div class="change three">
<p>here</p>
</div>
</div>
You could simplify things by removing the change class from the inner elements:
div.change > div {
width: 150px;
height: 150px;
background-color: green;
display: inline-block
}
div.change .one {
opacity: 0.7;
}
div.change .two {
opacity: 0.5;
}
div.change .three {
opacity: 0.3;
}
div p {
text-align: center;
padding: 80px 5px
}
<div class="change">
<div class="one">
<p>here</p>
</div>
<div class="two">
<p>here</p>
</div>
<div class="three">
<p>here</p>
</div>
</div>
Because you are using display inline change the display to flex and they will be next to each other:
display: flex;
you can use this also:
flex-direction: row;
or
flex-direction: row-reverse;
and remove change class from childrens keep it only on the parent element. i'd suggest to check a flexbox css course or tutorial it's a very useful property in css
I think that your problem is that you are set 200px width to both container and the inner divs via the 'change' class.
Try to set proper wodth to the container element, or use flexbox:
Setting display: flex; in the container div should work (but give it a new class name, don't use 'change' since you use it for the inner divs as well, and this settings is relevant just for the container).
Try to set some different and suitable width to the container in a new class name or other unique selcetor (600px should work).
If you want to know more about flexbox use this:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm trying to understand why this nth-of-type selector isn't working as expected. My goal is to make the first .row element red, and all others after the first blue, while leaving the items in green as they are.
https://jsfiddle.net/darrengates/pa34zyjd/14/
.wrapper div {
width: 200px;
background-color: green;
color: white;
margin: 5px;
padding: 5px;
}
.wrapper .row:nth-of-type(n+1) {
background-color: red;
}
.wrapper .row:nth-of-type(n+2) {
background-color: blue;
}
<div class="wrapper">
<div class="option">option</div>
<div class="button">some button</div>
<div class="row">I wanna be red</div>
<div class="row">I wanna be blue</div>
<div class="row">I wanna be blue</div>
<!-- all other row elements after the first should be blue -->
</div>
The n-th-of-type selector refers to the tag type on the same level, not the class, in this case the div tags which are siblings inside .wrapper. Therefore you need this CSS, since they are the third and fourth div in there:
.wrapper .row:nth-of-type(n+3) {
background-color: red;
}
.wrapper .row:nth-of-type(n+4) {
background-color: blue;
}
https://jsfiddle.net/cb3qd8t6/
nth-* selectors only look for the type of the element not the class name. In your example, I would use ~ or + to do it:
.wrapper div {
width: 200px;
background-color: green;
color: white;
margin: 5px;
padding: 5px;
}
.wrapper .row {
background-color: red;
}
.wrapper .row ~ .row {
background-color: blue;
}
<div class="wrapper">
<div class="option">option</div>
<div class="button">some button</div>
<div class="row">I wanna be red</div>
<div class="row">I wanna be blue</div>
<div class="row">I wanna be blue</div>
<!-- all other row elements after the first should be blue -->
</div>
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 7 years ago.
my code is as follows:
html
<div class="wrapper">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
css
.wrapper > div {
display: inline-block;
}
.wrapper .first {
width: 33.3%;
}
.wrapper .second {
width: 33.3%;
}
.wrapper .third {
width: 33.3%;
}
I use the above code, but it end up breaking into two line. I wonder what's wrong with it?
I know i can use float to do this. but the above code is haulting me for a long time . and hope someone can tell me the reason,thanks in advance.
Remove the spacing between the divs, I would use HTML comments for this to maintain the readability of your HTML.
.wrapper > div {
width: 33.33%;
display: inline-block;
height: 80px;
}
.first {
background: red;
}
.second {
background: yellow;
}
.third {
background: blue;
}
<div class="wrapper">
<div class="first"></div><!--
--><div class="second"></div><!--
--><div class="third"></div>
</div>