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;
}
Related
I am trying to format an html page as a court pleading which needs to print neatly on an 8.5 x 11 piece of paper. I have it looking to spec as an HTML, but when I go to print, the Container holding the contents expands beyond the body.
I have tried setting a specific width to the container to match the body, but that has not worked.
I created a fiddle with both the HTML and CSS:
See fiddle here
Here is the CSS for the BODY and CONTAINER:
body {
width: 8.5in;
height: 11in;
padding-left: 1.5in;
padding-right: .5in;
margin: 0;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
.container {
border-left: 2px solid black;
border-right: 2px solid black;
width: 8.5in;
margin: 0;
padding: 5px;
height: 100%;
}
If you click on the "Open print preview" text at the bottom of the result, and then attempt to print, you can see how the document changes in the print preview window in Chrome.
This application is meant to work in Chrome specifically. I am trying to produce a document that looks similar to the following, with the grey thinner lines indicating the edge of the page:
I'm not sure this is the solution which you are looking for. I tested your code in different browser's print preview functionality and found different result. Then I stick with google chrome and coded accordingly.
I found you used same code twice so it was not working properly! I put the other code for screen only. and change the following code for print
#media print {
body {
/* width: 8.5in; */
/* height: 11in; */
margin: 0;
border-left: 1px solid gray;
border-right: 1px solid gray;
/*Newly added codes */
box-sizing: border-box;
}
.container {
border-left: 2px solid black;
border-right: 2px solid black;
width: 100%;
margin: 0;
padding: 5px;
height: 100%;
/*Newly added codes */
box-sizing: border-box;
/* Copied from body */
padding-left: 1.5in;
padding-right: .5in;
}
}
In my code I removed the textarea, instead I put a <p> tag with editable capability. Please review the code and let me know your opinion.
And this is what I have here in Google Chrome.
I tried several option but not found any proper one! But this one is tricky! Just used the following code for print CSS. Please replace and test this code.
#media print {
body {
/* width: 8.5in; */
/* height: 11in; */
padding-left: 1.5in;
padding-right: .5in;
margin: 0;
border-left: 1px solid gray;
border-right: 1px solid gray;
/*Newly added codes */
box-sizing: border-box;
}
.container {
border-left: 2px solid black;
border-right: 2px solid black;
width: 6.5in;
margin: 0 auto;
padding: 10pt 36pt;
/* height: 100%; */
/*Newly added codes */
box-sizing: border-box;
/* Copied from body */
}
}
After that I used the custom margin in google chrome (Though I have not printed it! So you better test it for final output).
Hopefully this will satisfy your need! :)
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*/
}
Here I am using Oracle ADF.
My button is styled as follows:
af|commandButton:text-only {
background-image: none;
width: auto;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
af|commandButton:text-only:focus {
background-image: none;
width: auto;
outline: none;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
Removed focus outline using "outline:none;" as specified in the CSS snippet.
Now, focus outline is removed in all browsers except firefox.
As per the diagnosis I found that firefox uses "-moz-focus-inner" to render outline.
I tried the following two ways in CSS but no luck.
First way:
button::-moz-focus-inner {
border: 0;
}
Second way:
af|commandButton:text-only:focus::-moz-focus-inner,
af|commandButton:focus::-moz-focus-inner {
border:0;
}
How to specify styles for "-moz-focus-inner" in ADF ?
I had the same problem with my xul programm. The point was, that there was some shadow DOM hidden in the button, which has the dotted border.
This is how I made it work:
button *, button:focus *
{
border: 0;
}
Keep in mind, that the element within the button has a transparent border when the button is not in the :focus state. Therefor you have either to clear it for both states or just set the border to transparent too at :focus.
Hope that helps you too
Below I have included an image illustrating my issue. In summary, I am having an issue with an approximately 2 pixel whitespace below each of the images on my website. I'm not exactly sure what is causing this, but it is most definitely not the image itself. I believe it to be the box-sizing: border-box snippet in my CSS, due to the fact that 2px would be the sum of the top and bottom borders, however, removing that part of the code does not solve the issue. Any help or tips would be greatly appreciated. I have tried viewing the webpage on my mobile phone, using Firefox and using Chrome, and the issue is persistent between all of them.
The webpage in question can be found at http://www.bellasaluminum.com/gallery.php?jobType=GlassWindow&page=1, however, I have included a portion of the gallery's stylesheet below:
#gallery > div {
border: 1px solid black;
margin: 5px;
width: auto;
}
#gallery > div > * {
display: inline-block;
}
#gallery > div > img {
position: relative;
padding: 0px;
margin: 0px;
}
#gallery > div > div.description {
position: relative;
padding: 3px;
width: auto;
vertical-align: top;
}
#galleryNav {
padding: 0px;
background-color: #dedede;
text-align: center;
border-left: 2px solid black;
border-right: 2px solid black;
border-bottom: 1px solid black;
width: 90%;
margin: auto;
}
#galleryNav > a {
text-decoration: none;
color: black;
font-family: Arial;
font-weight: bold;
display: inline-block;
padding: 10px 8px 10px 8px;
margin: 0px;
}
#galleryNav > a:hover {
background-color: #efefef;
}
#galleryNav > a.active {
background-color: #afafaf;
}
You can either make the img elements block level:
#gallery > div > img {
display:block;
}
or, change the vertical-align property value to something like top. (the default is baseline)
#gallery > div > img {
vertical-align:top;
}
The second option (vertical-align:top) should be used in this instance, because you want the text to be inline with the img element.
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