I am trying to make the background color of the div's INSIDE reportRow to have a specific background color but I want it to switch colors every other reportRow.
I can't seem to get nth-child to work. Can anyone help?
<div class="reportRow">
<div style="width:75px;">Date1</div>
<div style="width:360px;">Address1</div>
<div style="width:40px;">Edit1</div>
<div style="width:40px;">Print1</div>
<div style="width:40px;">Delete1</div>
</div>
<div class="reportRow">
<div style="width:75px;">Date2</div>
<div style="width:360px;">Address2</div>
<div style="width:40px;">Edit2</div>
<div style="width:40px;">Print2</div>
<div style="width:40px;">Delete2</div>
</div>
http://jsfiddle.net/bhlaird/t75Zu/
You want to use nth-child on reportRow, but set the inner div's background
.reportRow:nth-child(2n) div {
background-color: blue;
}
In order to target every other nth-child, here's an example of what you should have in your CSS:
.reportRow:nth-child(even) {
background: #fff;
}
You can replace the parameter with even or odd as well as a couple of other things. Here's some documentation on the nth-child psuedo-class: http://www.w3schools.com/cssref/sel_nth-child.asp.
Related
I'm trying to select every element within a wrapper except the elements within one of the children. Consider this:
<div class="wrapper">
<div class="this">
<div class="that"></div>
</div>
<div class="foo">
<div class="bar"></div>
<div class="orange">
<div class="ignore"></div>
</div>
</div>
<div class="hello"></div>
<div class="world">
<div class="ignore">
<div class="this"></div>
</div>
</div>
</div>
What I want to do is to make the text color of everything inside wrapper white, except the elements that are inside ignore. What I got so far is .wrapper *:not(.ignore *), which doesn't work.
EDIT: I can't accept solutions that include overriding what the color is within .ignore because that color is pre-set, and is out of my control. It is also impossible to know which color is used in the pre-set. Imagine there's a body {color:blue;}, only in my case, it's impossible to know what color it is.
Add color: #fff to .wrapper
Then, add whatever color your want to .ignore
After that, make sure .ignore loads after .wrapper in your style sheet.
.wrapper {
background: #131418;
color: #fff;
font-size: 25px
}
.ignore {
color: #933
}
<div class="wrapper">
<div class="this">
<div class="that">wrapper</div>
</div>
<div class="foo">
<div class="bar">wrapper</div>
<div class="orange">
<div class="ignore">ignore</div>
</div>
</div>
<div class="hello">wrapper</div>
<div class="world">
<div class="ignore">
<div class="this">ignore</div>
</div>
</div>
</div>
If you put them in right order you can get this:
.wrapper {
background: green;
}
.wrapper *:not(.ignore) {
color: white;
}
.wrapper *, .wrapper .ignore *{
color: red;
}
<div class="wrapper">
<div class="this">
<div class="that">1</div>
</div>
<div class="foo">
<div class="bar">2</div>
<div class="orange">
<div class="ignore">3</div>
</div>
</div>
<div class="hello"></div>
<div class="world">
<div class="ignore">
<div class="this">4</div>
</div>
</div>
</div>
Note that :not(...) is applied to the current element, so you can't use :not(something [some element inside])
I'd suggest:
.wrapper div:not(.ignore) {
color: white;
}
The reason your posted CSS selector doesn't work – and shouldn't be expected to work – is because:
.wrapper *:not(.ignore *)
Is trying to select all descendent elements that are not descendants of the .ignore elements, whereas in your question it seems that you're trying to select only elements that are not themselves of the .ignore class.
Further, the :not() pseudo-class:
...is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument.
[Emphasis mmine, https://www.w3.org/TR/css3-selectors/#negation].
And a 'simple selector' is:
...either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.
[https://www.w3.org/TR/css3-selectors/#simple-selectors-dfn]
Which appears to prevent the use of a combinator, the white-space, representing the selection of a descendant; meaning that your selector .ignore * is an invalid selector for the negation (:not()) pseudo-class.
Pure CSS doesn't seem to provide a good solution - at least not one I can think of.
The problem with not is it can only apply to "simple selectors", which basically means the selector it applies to can't contain combinators like whitespace.
For simple cases, you could do what a lot of people are suggesting - just have a second rule that selects .ignore * and undoes what your .wrapper * rule does. But if the .wrapper * rule does a lot, or if the exact state you'd get without the .wrapper * rule is unclear (maybe set by an external resource) then that isn't necessarily practical.
What you could do is use JavaScript (or similar) to propagate the .ignore class down to all of its descendants, then just use :not(.ignore)
My code is as follows:
HTML
<div class="divs">
<div class="row">row 0</div>
<div class="not-row"></div>
<div class="row">row 1</div>
<div class="not-row"></div>
<div class="row">row 2</div>
<div class="not-row"></div>
<div class="row">row 3</div>
<div class="not-row"></div>
</div>
CSS
.row:nth-child(even) {
background: #fff;
}
.row:nth-child(odd) {
background: #eee;
}
This is supposed to paint the background of two of the rows gray and two of the rows white. Unfortunately it paints all of their backgrounds gray. What am I doing wrong?
I tried using nth-of-type instead of nth-child but that didn't change anything.
jsFiddle example
For even just use (as a default)
.row {}
Then override the odd ones with:
.row:nth-child(4n+1) {}
.row {
background: #fff;
}
.row:nth-child(4n+1) {
background: #eee;
}
http://jsfiddle.net/b8ma1hon/3/
More on how nth-child works can be found here:
https://css-tricks.com/how-nth-child-works/
You cannot simply use even/odd in this instance as that is in relation to all child elements, not just the ones with the class row.
Your inclusion of .row in the selector is purely an extra criteria and has no impact on the nth-child selector.
Likewise I could state:
.row:nth-child(1):hover {}
This would restrict selection to an element with a class of row, which is the 2nd child, which is currently in a hovered state.
It wouldn't make sense if this was the 2nd element out of all the hovered elements as you can only hover over one at a time.
I hope that makes sense!
It's also worth noting that your selector is now dependant on the not-row existing, or at least some kind of element existing between the row elements.
If this was to change then your selector would also have to change.
Alternatively you could change your element type for the not-row elements to something else so that you can make use of the nth-of-type selector:
<div class="divs">
<div class="row">row 0</div>
<span class="not-row"></span>
<div class="row">row 1</div>
<span class="not-row"></span>
<div class="row">row 2</div>
<span class="not-row"></span>
<div class="row">row 3</div>
<span class="not-row"></span>
</div>
.row {
background: #fff;
}
.row:nth-of-type(odd) {
background: #eee;
}
http://jsfiddle.net/b8ma1hon/5/
How can I style the numbers in the following HTML code independently of each other?
<div class="info-down">
<div class="container">
<div class="row">
<div class="col-xs-4">24</div>
<div class="col-xs-4">07</div>
<div class="col-xs-4">15</div>
</div>
</div>
</div>
You can add ids or another class to each the divs and style those independently.
Well, you have two options. You could add styling attributes to each of the numbers by adding this style="color:red", so that the line will look like this <div class="col-xs-4" style="color:red">. This would turn the color of the text to red. Or you could make a .CSS document and style it by adding id's to each of the div elements like this, id="firstLine" and then putting this in the .CSS document, #firstLine{color:red;}. the # character is used for styling elements by id's and the . character is used to style the elements by class. The .CSS document is the recommended method of styling as it keeps code split up and looking nice and tidy.
This might help you:
UPDATE with Demo
.col-xs-4:nth-child(1)
{
color:red;
}
.col-xs-4:nth-child(2)
{
color:green;
}
.col-xs-4:nth-child(3)
{
color:blue;
}
<div class="info-down">
<div class="container">
<div class="row">
<div class="col-xs-4">24</div>
<div class="col-xs-4">07</div>
<div class="col-xs-4">15</div>
</div>
</div>
</div>
I need a help
i failed to change background color for bootstrap parent element using css
this is my html code
<div class="body-panel">
<div class="col-sm-4 left-guest">
testing
</div>
<div class="col-sm-8 right-guest">
</div>
</div>
this is my css
.body-panel{
color: blue;
background-color: red;
}
.left-guest{
border: dotted 1px black;
min-height: 1000px;
}
.right-guest{
border: dotted 1px black;
min-height: 1000px;
}
but background-color at class body-panel is not working, and color is working
can someone help me?
thanks
.body-panel has zero height due to the floated children (col-sm-8)
You need to clear the floats by either giving .body-panel a row class or a clearfix class, both of which are built in bootstrap helper classes.
<div class="body-panel row">
<div class="col-sm-4 left-guest">
testing
</div>
<div class="col-sm-8 right-guest">
</div>
</div>
<div class="body-panel clearfix">
<div class="col-sm-4 left-guest">
testing
</div>
<div class="col-sm-8 right-guest">
</div>
</div>
EXAMPLE
Give body-panel overflow:hidden or even better, a row class.
This is because col classes from bootstrap are floated and as such parent element does not take them into account for height, so your body-panel has no height amd even though it applies background color, you don't see it.
I strongly suggest giving it a row class, as that' s a proper way to use bootstrap grid classes.
You can use jquery to achieve this scenario
please try this to change background color of parent div.
**
<script type ="text/javascript">
$(document).ready(function () {
$(".left-guest").parent().css("background-color", "yellow");
});
</script>
**
I'll start off by stating that I know this question has been asked a lot, but none of the answers I saw seemed to work for me.
Basically, I have some divs inside of a larger div. They'll have dynamic text, so I don't know how many lines each will be. The problem is that I can't seem to get the divs to size themselves to the parent's height. I want the column divs to take up the entire height of the row div (basically, I want that blue part to fill all the space between the bars).
HTML:
<div class="container">
<div class="row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
</div>
<div class="row divOne">
<div class="col-xs-3 divTwo">Different Text</div>
<div class="col-xs-3 divThree">
With some more text
</div>
</div>
</div>
CSS:
.divOne
{
border-top:10px solid black;
}
.divTwo
{
background-color: #32649b;
height:100%;
color:white;
}
jsfiddle:
Now, what I've learned from other versions of this question are that
float:left might be screwing it up
height:100% doesn't work if the parent's height is defined
position:relative might help on the parent
The problem with the float is that I'm using bootstrap, and that's where the float is coming from, so I don't really want to mess with that.
I can't really define parent height, because it'll be dynamic based on the children.
I also tried messing around with position:relative on the parent and absolute on the child, but that seemed to get really screwy. I'm also guessing this won't work because I'm using bootstrap. It's possible that I'm just missing something, though. I'll admit to not being the greatest with CSS.
I don't know if I'm having these issues because I'm using bootstrap, or because I'm just being an idiot right now.
Something else that seems to be throwing a wrench into things: These columns will be laid out differently on smaller screens vs. larger ones. I actually want something along the lines of col-xs-12 col-md-3 for these.
The short answer is that you can't really achieve this within the constraints of the bootstrap framework. There are plenty of articles that explain why div elements can't stretch to the height of their container, and how to get around this problem. One of the solutions I'm most fond of is Faux Columns.
But, let's get a little more creative then that.
I came up with something that might work for your scenario, but requires a bit of change to your markup. Here's a solution that wraps the bootstrap grid with display: table.
http://jsfiddle.net/Wexcode/13Lfqmjo/
HTML:
<div class="table-container">
<div class="table-row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
<div class="col-xs-6"></div>
</div>
</div>
CSS:
.table-container {
margin: 0 -15px;
}
.table-row {
display: table;
width: 100%;
}
.table-row [class^="col"] {
display: table-cell;
padding: 0 15px;
float: none;
}
Note that for this solution to work, you must include enough col elements to stretch it all 12 columns (see that I added an empty .col-xs-6 div).
You can add
display:flex;
to divOne , and will act like you wanted.
in bootstrap 4 'row' class applies this on div, but in ealier versions you need to add manually if you expect such behavior.
Give .divOne a display: flex and remove the height: 100% from .divTwo:
.divOne
{
border-top:10px solid black;
display: flex;
}
.divTwo
{
background-color: #32649b;
/*height:100%;*/
color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
</div>
<div class="row divOne">
<div class="col-xs-3 divTwo">Different Text</div>
<div class="col-xs-3 divThree">
With some more text
</div>
</div>
</div>