I'm trying to apply what I learned in the CSS foundation course (codeschool) to style my d3 objects and so far I'm not getting it right.
I have a bunch of CSS classes which style my charts. I have two types of charts, for the second type I need to override one color.
Main CSS (I didn't create this myself)
.horizon {
border-bottom: solid 1px #000;
overflow: hidden;
position: relative;
}
.horizon {
border-top: solid 1px #000;
border-bottom: solid 1px #000;
}
.horizon + .horizon {
border-top: none;
}
.horizon canvas {
display: block;
}
.horizon .title,
.horizon .value {
bottom: 0;
line-height: 30px;
margin: 0 6px;
position: absolute;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
white-space: nowrap;
}
.horizon .title {
left: 0;
}
.horizon .value {
right: 0;
}
Override CSS (For my second type I needed a different color)
(This used to be the first file with changing all horizons to horizon_small which is bad I know.)
.horizon .horizon_small {
border-top: solid 1px #bdbdbd;
border-bottom: solid 1px #bdbdbd;
}
Applying this here:
d3.select("#mychart")
.selectAll(".horizon")
.data(data).enter().insert("div", ".bottom")
.attr("class", ["horizon", "horizon_small"]) // used to be "horizon_small" only
but it doesn't work, not sure where the problem is.
Many things were wrong I went back to my css notes from the tutorial
(1) in the css file, the following means apply horizon_small if the parent is horizon
.horizon .horizon_small {
border-top: solid 1px #bdbdbd;
border-bottom: solid 1px #bdbdbd;
}
while the following means apply both horizon and horizon_small (which is the correct version)
.horizon.horizon_small {
border-top: solid 1px #bdbdbd;
border-bottom: solid 1px #bdbdbd;
}
Next, thanks to the answers/comments, the d3 part should be like the following:
d3.select("#mychart")
.selectAll(".horizon .horizon_small")
.data(data).enter().insert("div", ".bottom")
.attr("class", "horizon horizon_small")
The selector ".horizon .horizon_small" targets an element with a class "horizon_small" inside (at some level) some other element with class "horizon". If you want to only target elements with both classes, the selector should be ".horizon.horizon_small".
source : http://www.w3.org/TR/CSS2/selector.html#class-html
Related
This question already has answers here:
Nesting CSS classes
(8 answers)
Closed 5 years ago.
I was reading documentation about Angular Material and I ran into this:
.column-login {
padding: 16px;
div {
background: #f5f5f5;
border: 1px solid #000;
padding: 50px;
margin: 16px 0;
}
}
And it seemed to me a little bit weird.
I'm using Visual Studio Code and it shows a bunch of errors there just as I was expecting.
But the code works perfectly.
Now, is there any equivalent to that piece of css code?
Because I tried:
.column-login {
padding: 16px;
}
.column-login > div {
background: #f5f5f5;
border: 1px solid #000;
padding: 50px;
margin: 16px 0;
}
And:
.column-login {
padding: 16px;
}
.column-login div {
background: #f5f5f5;
border: 1px solid #000;
padding: 50px;
margin: 16px 0;
}
But it broke. It only works with the first piece of code I just showed you.
But I don't know, it seems to me so weird.
Can anybody explain me why is it correct?
Nested rules is not valid CSS, but it is a feature of a CSS preprocessor program like Sass - it generates valid CSS when compiled.
Your sample generates the following from Sass:
.column-login {
padding: 16px;
}
.column-login div {
background: #f5f5f5;
border: 1px solid #000;
padding: 50px;
margin: 16px 0;
}
In my app a frequently used HTML component is styles as:
.box {
min-width: 100px;
padding: 20px 10px;
}
there are a lot of these (100+) and their border is styled without bottom and different by color:
.box:nth-child(1) {
border: 2px solid red;
border-bottom: none;
}
.box:nth-child(2) {
border: 2px solid green;
border-bottom: none;
}
.box:nth-child(3) {
border: 2px solid blue;
border-bottom: none;
}
.box:nth-child(4) {
border: 2px solid yellow;
border-bottom: none;
}
...
There's a page in the app where all these boxes need to be displayed with full border (including the bottom border) - what is needed is to remove the 'boder-bottom:none' definitions. So in this specific page I've tried to override the .box definition:
.box {
border-bottom: initial; /* tried unset as well...*/
}
But this still results with no border. Is there a way to specify a style so all the .box accepts the full border - or I have to redefine all of the bottom borders?
-Dan
Why not define another class for that component and define border-bottom for that class and put it as !important
.another_class{
border-bottom: 1px solid #efefef !important;
}
border-bottom: initial; won't give you a border.
Set the second definition to border-bottom: 1px solid #efefef;
I have this CSS code for a textbox class and I'm on working on linux.
It's saved in a .css file and i'm using gedit. But the box-shadow property isn't recognized. All the others have that different font which shows a keyword or so. But not box-shadow. Any ideas please? It seems to work on windows when i use notepad++.
.textbox
{
background: white;
border: 1px solid #ffa853;
border-radius: 5px;
box-shadow: 0 0 5px 3px #00FFFF;
color: #666;
outline: none;
height:23px;
width: 275px;
}
You may be confusing box-shadow with text-shadow.
text-shadow applies to text, box applies to containers
I have made a small fiddle to demonstrate both
div {
width: 200px;
height: 300px;
background-color: #fff;
box-shadow: 10px 10px 5px grey;
}
p {
text-shadow: 1px 1px 2px black;
color: red;
font-size: 5em;
}
<div>
<p>
hello
</p>
</div>
if you are trying to adjust the appearance of an input (or a number of inputs)
a useful way of doing it is:
input[type="text"] {
/*your styles here*/
}
I need to know how to make a borders between my items like the following image:
I tried making it using border-right and -left but the last item shouldn't have a border-right.
My CSS:
border-top: 1px solid #000;
border-right: 1px solid #000;
How can I apply border-right to all but the last element on the row?
There is a better way to do it that works in older browsers: http://jsfiddle.net/mxV92/.
You simply apply a border on the left for every item that immediately follows another item:
ul > li + li {
margin-left: 5px;
padding-left: 5px;
border-left: 1px solid #bbb;
}
If I understand correctly, what you want is to have borders on the right of all the items, except the last item.
You can use the 'last-child' selector for that. For example, if your objects were in a 'div' with the class 'foo', your CSS might look like:
div.foo {
border-width: 1px 1px 0 0;
border-color: #000;
border-style: solid;
}
div.foo:last-child { border-width: 1px 0 0 0; }
This says that divs of class 'foo' should have solid black borders, with a width of 1px on top and right ('border-width' is followed by widths in the order top, right, bottom, left), except on the last item, where the width is '1px' only on the top.
':last-child' should be supported by most modern browsers.
add this to your style.css, turn off border-right every 4th books. (this only works on the desktop version of the site.)
.nspArt:nth-child(4n) .gkResponsive img.nspImage {
border-right: none;
}
You can do this:
.books-collection {
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 5px 0;
}
.books-collection .book:not(:first-child) {
border-left: 1px solid #bbb;
padding: 5px 0;
}
I have styled all my text fields with a gray border, and for the fields with class="form_field_error", I want the border-color to change to red.
I have tried the following code, but I can't get my class to override the previously defined border? What am I missing?
HTML:
<input type="text" name="title" id="title" class="form_field_error">
CSS:
input[type="text"] {
display: block;
height: 15px;
font-weight: normal;
color: #777;
padding: 3px;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.form_field_error {
border: 1px solid #f00;
}
I created a jsFiddle to illustrate the problem.
The input[type="text"] css takes precedence over the .form_field_error css.
Change it to input.form_field_error and the border will work.
Try this:
.form_field_error {
border: 1px solid #f00 !important;
}
I would recommend using:
input[type="text"].form_field_error {
border: 1px solid red;
}
The "!important" rule should only be used as a last resort - nuclear option - because it will surpass all other attempts to target an element based on precise and relevant specificity, reducing the control you have and creating potential roadblocks for future developers. Therefore the proper way, and the best way to handle it is to start with the same selector as the original one you are trying to override, then simply add the one thing that distinguishes it from the original. This way the specificity will be precisely what you want.
Have you tried specifying which div to apply the red border to like this?
input.form_field_error {
border: 1px solid red;
}
And on a side note - the ID you set as 'title' is that just for that one or are you thinking of reusing that?
Because you could also do ->
#title.form_field_error {
border: 1px solid red;
}