I have the following markup:
<div class="chat-area">
<div class="username-area">
</div>
<div class="message-area">
</div>
<div class="options-area">
</div>
</div>
<div class="chat-area">
<div class="username-area">
</div>
<div class="message-area">
</div>
<div class="options-area">
</div>
</div>
And I'm trying to alternate the background colours of username-area between #00A6FF and #27FF00. In my css I have:
.chat-area .username-area:nth-child(odd){
background-color: #00A6FF;
}
.chat-area .username-area:nth-child(even){
background-color: #27FF00;
}
But all the username-area divs are being set to #00A6FF. I tried using :nth-of-type and I've also tried using expressions (2n+1 and 2n+2) instead of 'odd' and 'even' but I'm having no luck figuring this out. I had a look at a few questions on this site but the solutions haven't helped or seem to be addressing issues that don't apply to my code, I think.
Just so that one:
.chat-area:nth-child(odd) .username-area{
background-color: #00A6FF;
}
.chat-area:nth-child(even) .username-area{
background-color: #27FF00;
}
#Marcos Pérez Gude was faster :)
Just give a turn to the ommelete :)
.chat-area:nth-child(odd) .username-area{
background-color: #00A6FF;
}
.chat-area:nth-child(even) .username-area{
background-color: #27FF00;
}
It's because the odd and even elements are .chat-area, not username-area.
Related
I have encountered a fair amount of roadblocks in trying to establish a page break on every 3rd item_wrapper. My element structure and general styles are as such:
<div class='main_wrapper'>
<div class='main'>
<div class='main_details'>
<div class='main_items_container'>
<div class='main_items_wrapper'>
<div class='item_wrapper'>...</div>
<div class='item_wrapper'>...</div>
<div class='item_wrapper'>...</div>
<div class='item_wrapper'>...</div>
<div class='item_wrapper'>...</div>
<div class='item_wrapper'>...</div>
<div class='item_wrapper'>...</div>
<div class='item_wrapper'>...</div>
</div>
</div>
</div>
</div>
</div>
.main_wrapper {
display: inline-block
}
.main {
position: relative
width: 100%
height: 100%
}
.main_items_wrapper {
display: flex
flex-direction: column
}
.item_wrapper {
display: block
}
The following is my initial solution:
#media print {
.main_items_wrapper:nth-child(3n) {
break-after: always
}
}
Please note that I have attempted to follow the recommendations of many posts - display, width, height, float, etc. Unfortunately, I just cannot get this to work. Any help would be greatly appreciated. Thank you in advance.
If you mean a horizontal line across the webpage as a page break, then you can use the hr tag. You can set the height and width to your specifications.
For some reason I can show the hr tag because it is producing a line here. Below is an example (gray line)
Well, it appears as though the flexbox associated with .main_items_wrapper was the problem. Certainly a lesson learned. Thank you to those that took the time to assist me.
I'm trying to match element that dose not match given selector using css.
Given the markup below, I'm trying to select only the first ".color"
<div uid="unique-id-1">
<div> <div class="color"></div> </div>
<div uid="unique-id-2">
<div class="color"></div>
</div>
</div>
I tried [uid="unique-id-1"] .color:not([uid="unique-id-1"] [uid] .color) which did not work obviously, but I think it will help to understand what I am looking for.
Thanks in advance!
If you're only going to apply the selector to this limited combination of elements (i.e. there aren't any other .colors in the page that could potentially be affected by this), then
[uid="unique-id-1"] > div:not([uid]) > .color
Do consider renaming the attribute to data-uid if your application allows, so as to make it clearer that this is an app-specific and non-standard uid attribute.
That seems simple:
[uid="unique-id-1"]>:first-child .color {
color: red;
}
<div uid="unique-id-1">
<div>
<div class="color">A</div>
</div>
<div uid="unique-id-2">
<div class="color">B</div>
</div>
</div>
That being said, uid as an attribute name makes your HTML invalid, so you should rename that to data-uid:
[data-uid="unique-id-1"]>:first-child .color {
color: red;
}
<div data-uid="unique-id-1">
<div>
<div class="color">A</div>
</div>
<div data-uid="unique-id-2">
<div class="color">B</div>
</div>
</div>
Is there a way to remove the whitespace above and below the headings of h1-h6? Margin and padding were not working.
Check this codepen.
Thank you!
<div class="background">
<h1>This is H1!</h1>
</div>
<div class="background">
<h2>This is H2!</h2>
</div>
<div class="background">
<h3>This is H3!</h3>
</div>
<div class="background">
<h4>This is H4!</h4>
</div>
<div class="background">
<h5>This is H5!</h5>
</div>
<div class="background">
<h6>This is H6!</h6>
</div>
the css is
.background {
background: orange;
margin-bottom: 10px;
}
h1 {
margin: 0;
padding: 0;
}
This will hide the white
<body style="background-color:orange;">
EDIT kevin beat me to it and his is better. lol
you're dividing the headers into sections! don't use the 'div' tag when all of the elements are going to have the same styles anyway!
<div style = "background-color:yellow">
<h1>This is H1!</h1>
<h2>This is H2!</h2>
<h3>This is H3!</h3>
<h4>This is H4!</h4>
<h5>This is H5!</h5>
<h6>This is H6!</h6>
</div>
note : the usage of "background-color" in the tag is the same as using css in your code. should fix your problem!
edit :
due to some confusion, the answer above is not what the Asker meant (see comments), so here's my new answer.
what you're aiming to do, can't be perfectly done (in my experience) but if you want; you can use boxes (images) in place of your actual headings.
or, use
<div class="background">
<h1 style = "transform : scale(1,1.65)">This is H1!</h1>
</div>
which is a little bit cheesy, and can't be maintained well (if the font changes, it no longer fits perfectly)
see : related
Essentially, what I have in mind is a bunch of div elements, and I want to alternate colours. I could do this using IDs, but I want to use classes to minimize the amount of extra (and potentially spaghetti) code needed.
<div id="divs">
<div class="bla">
</div>
<hr/>
<div class="bla">
</div>
</div>
I've already tried nth-child, but it didn't work.
Edit: And I want to keep the hr.
You need to remove the <hr> element, see this fiddle
HTML
<div id="divs">
<div class="bla">bla</div>
<div class="bla">bla</div>
</div>
CSS
div.bla:nth-child(even) {
background-color: #CCC;
}
div.bla:nth-child(odd) {
background-color: #FFF;
}
I am using the following CSS to try and remove the left-border on the first child div of any element with the class called, "tblRow"
.tblRow div:first-child{
border-left: none;
}
<div class="tbl">
<div class="tblRow">
<div class="tblCell">Lower limit QTY</div>
<div class="tblCell">Upper Limit</div>
<div class="tblCell">Discount</div>
</div>
<div class="tblRow">
<div class="tblCell">1</div>
<div class="tblCell">5</div>
<div class="tblCell">25%</div>
</div>
</div>
This only removes the left-border from the first child div in the first row. It does not remove it in the second row. Any ideas?
I generally only use the :first-child and :nth-child psuedo selectors when I have little or no control over the elements or they are populated dynamically where I cannot rely on an order. Additionally, since :nth-child is CSS3, you can't rely on complete browser compatibility. If you can do without this psuedo selector, my advise is to create a secondary class for this purpose.
.tblCell.firstCell{
border-left: none;
}
<div class="tbl">
<div class="tblRow">
<div class="tblCell firstCell">Lower limit QTY</div>
<div class="tblCell">Upper Limit</div>
<div class="tblCell">Discount</div>
</div>
<div class="tblRow">
<div class="tblCell firstCell">1</div>
<div class="tblCell">5</div>
<div class="tblCell">25%</div>
</div>
</div>
It seems to work on the fiddle, so you probably have a (hidden) text node somewhere there. Therefore I suggest using .tblRow div:first-of-type { ... }, if possible from browser support point-of-view.