Markup:
<div class="form">
<div class="form-row">
<div class="text-field">
/* I want to apply styles for this div */
</div>
</div>
</div>
scss styles:
.form {
&-row {
// WHY this doesn't work
.text-field {
width: 20%;
}
// WHY this doesn't work
div.text-field {
width: 20%;
}
// WHY this doesn't work
& .text-field {
width: 20%;
}
// This works. I don't want this syntax.
div[class^='text-field'] {
width: 20%;
}
}
}
all options are work correctly...
i just check using background color :
.form {
&-row {
// WHY this doesn't work
.text-field {
width : 20%;
background-color: red;
}
// WHY this doesn't work
div.text-field {
width : 20%;
background-color: red;
}
// WHY this doesn't work
& .text-field {
width : 20%;
background-color: red;
}
// This works. I don't want this syntax.
div[class^='text-field'] {
width : 20%;
background-color: red;
}
}
}
Related
I'm building a blog with Angular and I want to create my posts with Markdown. I intend to use ngx-markdown to render them. Right now I'm creating a "post creation" component. The thing is I wish to apply some styling on the markdown, but I can't. This is my component:
<div class="header-container">
<h1 class="header">New post</h1>
<button>Send</button>
</div>
<div class="main-container">
<div class="post-editor">
<label for="title">Title:</label>
<input class="title-field" type="text" name="title"
placeholder="E.g: Introduction to Programming" autocomplete="off"
[(ngModel)]="post.title"
>
<textarea [(ngModel)]="post.content"></textarea>
</div>
<div class="post-preview">
<markdown class="markdown" [data]="getPostAsString()" ngPreserveWhitespaces>
</markdown>
</div>
</div>
import { Component, OnInit } from '#angular/core';
interface Post {
title: string;
content: string;
}
#Component({
selector: 'app-create-post',
templateUrl: './create-post.component.html',
styleUrls: ['./create-post.component.css']
})
export class CreatePostComponent implements OnInit {
post: Post = {
title: 'Introduction to Programming',
content: 'Lorem ipsum dolor, sit amet...'
};
constructor() {
}
ngOnInit(): void {
}
getPostAsString(): string {
return `# ${this.post.title}\n` + this.post.content;
}
}
h1 {
margin-top: 20px;
color: blue;
}
label {
font-size: 18px;
}
input, textarea {
width: 100%;
}
input {
height: 25px;
}
textarea {
height: 300px;
}
button {
margin-left: auto;
height: 75%;
align-self: center;
font-size: 18px;
padding: 5px 10px;
}
.header-container, .main-container {
display: flex;
}
.post-editor, .post-preview {
flex: 1;
}
.post-preview {
padding-top: 20px;
}
.post-editor {
margin-right: 40px;
}
.header {
margin-bottom: 25px;
}
.title-field {
display: block;
margin-top: 5px;
margin-bottom: 20px;
}
Note this rule:
h1 {
color: blue;
}
I applied it for test purposes. The header on top of the page that says "New Post" gets styled (blue), but the markdown one does not. I also tried using different selectors such as markdown h1 and .post-preview h1, but none worked. Why it isn't working and how can I make it work?
Generally libray css changes is working in styles.css you should try to add you css code block to styles.css
.post-preview h1 {
color: blue;
}
If you are using Angular you can apply the styles when you use ::ng-deep:
.post-preview ::ng-deep h1 {
color: blue;
}
* {
background-color:grey;
}
body {
margin: 0 ;
}
#container {
height:800px;
display:flex;
text-align:center;
justify-content:flex-start;
flex-direction: column;
}
#container {
width:15%;
}
#container > a {
flex:1;
border-radius:10px;
height:100px;
}
#box-1 {
background-color:green;
flex-grow: 2;
}
#box-2 {
background-color:yellow;
}
#box-3 {
background-color:pink;
}
#box-4 {
background-color:aqua;
}
#box-5 {
background-color:blue;
}
#box-6 {
background-color:chocolate;
}
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
<body>
<nav>
<div id="container">
<a id="box-1" href="#"></a>
<a id ="box-2" href="#"></a>
<a id="box-3" href="#"></a>
<a id="box-4" href="#"></a>
<a id="box-5" href="#"></a>
<a id="box-6"href="#"></a>
</div>
</nav>
</body>
Hello , recenly I was learning flexbox, and right now I'm trying to go back to #media rule and it doesn't seem to work. I even tried changing it to w3 school's #media rule example . But it doesn't change its background-color to olive as it is written in the #media rule. Could anyone explain me how come it doesn't work?
You need to add html in your css like so:
html, body {
background-color: olive;
}
Here's a working example
The issue is simply that, in the snippet in your question, nav takes up the entire page, so it completely covers body. The background color body will only show if there are not elements on top of it.
Nav is being affected by this rule:
* {
background-color: grey;
}
The best thing to do is to not use the wildcard selector for setting background color. Instead, if you want the background of your page to be gray on desktop and olive on mobile, do that:
body {
background-color: grey;
}
#media (max-width: 600px) {
body {
background-color: olive;
}
}
Then delete the wildcard rule entirely. Make a separate rule for the elements that you actually want to have a special background color as needed.
body {
background-color: gray;
margin: 0;
}
#container {
height: 800px;
display: flex;
text-align: center;
justify-content: flex-start;
flex-direction: column;
}
#container {
width: 15%;
}
#container>a {
flex: 1;
border-radius: 10px;
height: 100px;
}
#box-1 {
background-color: green;
flex-grow: 2;
}
#box-2 {
background-color: yellow;
}
#box-3 {
background-color: pink;
}
#box-4 {
background-color: aqua;
}
#box-5 {
background-color: blue;
}
#box-6 {
background-color: chocolate;
}
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
<body>
<nav>
<div id="container">
<a id="box-1" href="#"></a>
<a id="box-2" href="#"></a>
<a id="box-3" href="#"></a>
<a id="box-4" href="#"></a>
<a id="box-5" href="#"></a>
<a id="box-6" href="#"></a>
</div>
</nav>
</body>
Add
nav {
background-color: transparent;
}
The reason: nav is 100% wide and takes on the background color from the * rule, therefore its grey background spreads across the whole width, even below 600px width. The rule above prevents that and lets the olive background of body come through.
* {
background-color: grey;
}
body {
margin: 0;
}
#container {
height: 800px;
display: flex;
text-align: center;
justify-content: flex-start;
flex-direction: column;
}
nav {
background-color: transparent;
}
#container {
width: 15%;
}
#container>a {
flex: 1;
border-radius: 10px;
height: 100px;
}
#box-1 {
background-color: green;
flex-grow: 2;
}
#box-2 {
background-color: yellow;
}
#box-3 {
background-color: pink;
}
#box-4 {
background-color: aqua;
}
#box-5 {
background-color: blue;
}
#box-6 {
background-color: chocolate;
}
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
<body>
<nav>
<div id="container">
<a id="box-1" href="#"></a>
<a id="box-2" href="#"></a>
<a id="box-3" href="#"></a>
<a id="box-4" href="#"></a>
<a id="box-5" href="#"></a>
<a id="box-6" href="#"></a>
</div>
</nav>
</body>
I'm creating a grid system in wordpress using Skeleton.css
The tutorial shows the following markup for the header, here you can see the logo has has a 3 classes, - five columns and clearfix
<header>
<div class="five columns clearfix">
get_template_directory_uri(); ?>/img/logo.svg"></a>
</div>
</header>
But when I look at the skellton css I cannot see a class of 'five' So i changed it to .five.columns But his make no difference, I i create a border around the class .five.columns, it does not show up am I missing something obvious?
.one.column,
.one.columns { width: 4.66666666667%; }
.two.columns { width: 13.3333333333%; }
.three.columns { width: 22%; }
.four.columns { width: 30.6666666667%; }
.five.columns { width: 39.3333333333%; }
.six.columns { width: 48%; }
.seven.columns { width: 56.6666666667%; }
.eight.columns { width: 65.3333333333%; }
.nine.columns { width: 74.0%; }
.ten.columns { width: 82.6666666667%; }
.eleven.columns { width: 91.3333333333%; }
.twelve.columns { width: 100%; margin-left: 0; }
.one-third.column { width: 30.6666666667%; }
.two-thirds.column { width: 65.3333333333%; }
.one-half.column { width: 48%; }
/* Offsets */
.offset-by-one.column,
.offset-by-one.columns { margin-left: 8.66666666667%; }
.offset-by-two.column,
.offset-by-two.columns { margin-left: 17.3333333333%; }
.offset-by-three.column,
.offset-by-three.columns { margin-left: 26%; }
.offset-by-four.column,
.offset-by-four.columns { margin-left: 34.6666666667%; }
.offset-by-five.column,
.offset-by-five.columns { margin-left: 43.3333333333%; }
.offset-by-six.column,
.offset-by-six.columns { margin-left: 52%; }
.offset-by-seven.column,
.offset-by-seven.columns { margin-left: 60.6666666667%; }
.offset-by-eight.column,
.offset-by-eight.columns { margin-left: 69.3333333333%; }
.offset-by-nine.column,
.offset-by-nine.columns { margin-left: 78.0%; }
.offset-by-ten.column,
.offset-by-ten.columns { margin-left: 86.6666666667%; }
.offset-by-eleven.column,
.offset-by-eleven.columns { margin-left: 95.3333333333%; }
.offset-by-one-third.column,
.offset-by-one-third.columns { margin-left: 34.6666666667%; }
.offset-by-two-thirds.column,
.offset-by-two-thirds.columns { margin-left: 69.3333333333%; }
.offset-by-one-half.column,
.offset-by-one-half.columns { margin-left: 52%; }
}
/* Larger than mobile */
#media (min-width: 400px) {}
Many thanks
Here is a fiddle with some styling for height and color to make it obvious. Is your div 0px height? Check it with your developer tools in the browser - Chrome Developer Tools website.
https://jsfiddle.net/p1w61hmt/.
<header style="height: 100px; background: green;">
<div class="five columns clearfix" style="height: 100%;">
</div>
</header>
.five.columns { width: 39.3333333333%; }
.columns { background: red; }
Its probably some pasting errors but your HTML is not valid and your css looks like an incomplete snippet.
I am using Bootstrap 2 mixins .makeRow() and .makeColumn() to make columns 4,3 and 5 which equals to a full row span 12 width. But it doesnt get applied properly. This is a screenshot of what I get.
Markup:
<div class="calculators-form-field credit-amount">
<div class="calculators-labels">
<label>Your monthly budget <i class="label-tooltip icon-info-sign glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip"></i>
<a class="calculators-helper-link" href="#" data-toggle="modal" data-target="#budgetCalModal">(Help me)</a>
</label>
</div>
<div class="calculators-sliders">
<input type="range" value="0" min="50" max="5000" step="50" tabindex="-1" data-bind="value: monthlyBudget">
</div>
<div class="calculators-inputs">
<div class="input-group input-prepend">
<span class="input-group-addon add-on">$</span>
<input name="monthlyBudget" class="form-control" type="text" placeholder="0" required="" data-bind="number, live: monthlyBudget" data-parsley-min="50" data-parsley-max="5000" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-errors-container="#affordabilityCalErrorBudget">
</div>
</div>
<div class="calculators-inputs-error" id="affordabilityCalErrorBudget"></div>
</div>
Less:
.calculators-form-field {
.makeRow();
margin-bottom: 10px;
.calculators-labels {
.makeColumn(3);
.calculators-sliders {
input[type='range'] {
width: 100%;
}
.makeColumn(4);
}
}
.calculators-inputs {
.makeColumn(5);
}
}
Can anyone tell me how to fix this?
Firstly notice that you can not compile Bootstrap 2 with the latest version of Less without modifications, see: Less v2 does not compile Twitter's Bootstrap 2.x
Secondly i think #seven-phases-max is right;
#import "bootstrap3/bootstrap-2.3.2/less/bootstrap.less";
.calculators-form-field {
.makeRow();
margin-bottom: 10px;
.calculators-labels {
.makeColumn(3);
}
.calculators-sliders {
input[type='range'] {
width: 100%;
}
.makeColumn(4);
}
.calculators-inputs {
.makeColumn(5);
}
}
Compiles into CSS as follows:
.calculators-form-field {
margin-left: -20px;
*zoom: 1;
margin-bottom: 10px;
}
.calculators-form-field:before,
.calculators-form-field:after {
display: table;
content: "";
line-height: 0;
}
.calculators-form-field:after {
clear: both;
}
.calculators-form-field .calculators-labels {
float: left;
margin-left: 20px;
width: 220px;
}
.calculators-form-field .calculators-sliders {
float: left;
margin-left: 20px;
width: 300px;
}
.calculators-form-field .calculators-sliders input[type='range'] {
width: 100%;
}
.calculators-form-field .calculators-inputs {
float: left;
margin-left: 20px;
width: 380px;
}
The above CSS code seems to work well for the default 940px grid, see also:
http://codepen.io/anon/pen/ogoyZW
In the situation that you use responsive grids the above does not work as expected. You can not reuse the .makeColumn() and .makeRow mixins due to https://github.com/less/less.js/issues/2435. You can try to create new mixins like that shown below:
.makeRow-responsive() {
.gutter(#GutterWidth) {
margin-left: #GutterWidth * -1;
}
.clearfix();
.gutter(#gridGutterWidth);
#media (min-width: 1200px) {
.gutter(#gridGutterWidth1200);
}
#media (min-width: 768px) and (max-width: 979px) {
.gutter(#gridGutterWidth768);
}
}
.makeColumn-responsive(#columns: 1, #offset: 0) {
.set(#width; #GutterWidth) {
margin-left: (#width * #offset) + (#GutterWidth * (#offset - 1)) + (#GutterWidth * 2);
width: (#width * #columns) + (#GutterWidth * (#columns - 1));
}
float: left;
.set(#gridColumnWidth;#gridGutterWidth);
#media (min-width: 1200px) {
.set(#gridColumnWidth1200,#gridGutterWidth1200);
}
#media (min-width: 768px) and (max-width: 979px) {
.set(#gridColumnWidth768,#gridGutterWidth768);
}
}
You can now call the above mixins as follows:
.calculators-form-field {
.makeRow-responsive();
margin-bottom: 10px;
.calculators-labels {
.makeColumn-responsive(3);
}
.calculators-sliders {
input[type='range'] {
width: 100%;
}
.makeColumn-responsive(4);
}
.calculators-inputs {
.makeColumn-responsive(5);
}
}
Example: http://www.bootply.com/CJtufRFlI2
I'm trying to teach myself CSS and have the following markup:
<style type="text/css">
#content { display: block; width: 250px; height: 50px; background-color: #330000; }
/* pink */
#one { height: 25px; width: 25px; background-color: #FFCCCC; float: left; margin: 10px; }
/* hot pink */
#two { height: 25px; width: 25px; background-color: #FF0099; float: left; margin: 10px; }
/* tan */
#three { height: 25px; width: 25px; background-color: #CC9900; float: left; margin: 10px; }
/* aqua blue */
#four { height: 25px; width: 25px; background-color: #33FFFF; float: left; margin: 10px; }
/* yellow */
#five { height: 25px; width: 25px; background-color: #FFFF00; float: right; margin: 10px; }
</style>
</head>
<body>
<div id="content">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
</div>
The page is working correctly, but I'm interested in removing the duplicate code within the CSS itself. I.e. have all height, width, float all in one defintion then override the background color for each of the #id values
When I tried:
#content { height: 25px; width: 25px; float: left; margin: 10px }
then put:
#one { background-color: #FFCCCC; }
#five { background-color: #FFFF00; float: right; }
that didn't work.
Basically I'm trying to remove the amount of duplicate markup.
What am I missing?
You have to specify the node after #content:
#content div { SAME RULES }
#one { INDIVIDUAL }
#five { INDIVIDUAL }
or you can do this:
#one, #two, #five { SAME RULES }
#one { INDIVIDUAL }
You can also give each of those divs a class name and do
.divs { SAME RULES }
#one { INDIVIDUAL }
You want:
#content div {
i.e. "All the div elements that descend from the element with the id 'content'"
I recommend giving http://css.maxdesign.com.au/selectutorial/ a read.
You could use classes. Define a base class that contains the common properties:
/* Generic class for all four elements */
div.button { height: 25px; width: 25px; float: left; margin: 10px; }
and then define 1-4 (I'm using classes here as well, as it is the best practice in many cases, but you can carry on using IDs if you want to):
div.one { background-color: #FFCCCC; ... }
div.two { background-color: #FF0099; ... }
and then assign the base class and the specific class:
<div id="one" class="button one"></div>
the "button one" part will let both classes' properties apply to the element.
Here ya go, #content div is what you want. You can go deeper if you needed, ie #content div span a would reference an anchor, nested in a span that's nested in the div that's nested in something with the ID of #content.
http://jsfiddle.net/eDhXs/
#content { display: block; width: 250px; height: 50px; background-color: #330000; }
#content div { height: 25px; width: 25px; float: left; margin: 10px; }
/* pink */
#one { background-color: #FFCCCC; }
/* hot pink */
#two { background-color: #FF0099; }
/* tan */
#three {background-color: #CC9900; }
/* aqua blue */
#four { background-color: #33FFFF; }
/* yellow */
#five { background-color: #FFFF00; }
This is where you would make use of classes. IDs are great for when you have a particular element that is unique to the page. But classes, you can define a set of attributes (even set an attribute more important than another). Furthormore, an element can have more than one class where they can't IDs
So what I would do is this
#pink { background-color: #FFCCCC; }
#hotpink { background-color: #FF0099; }
#tan{ background-color: #CC9900; }
#aquablue { background-color: #33FFFF; }
#yellow { background-color: #FFFF00; }
.box {
height: 25px;
width: 25px;
float: left;
margin: 10px;
}
And specify them in your HTML like this
<div id='pink' class='box'></div>
I like this version the best, because if you ever need to select this element in the DOM explicitly, it would look like
#pink.box {
height: a different height;
}
There are actually three alternative solutions to your problem
First solution
The first one is very close to what you've written yourself except that it should define CSS for any DIV underneath the one with the id="content":
#content div { height: 25px; width: 25px; float: left; margin: 10px }
Second solution
I should point out that this one is probably more common and gives more flexibility especially if you want subDIVs to not have common classes (in your case sizing). This one changes your markup a bit because you can define multiple CSS classes on a single HTML element:
<div>
<div class="content one"></div>
<div class="content two"></div>
<div class="content three"></div>
<div class="content four"></div>
<div class="content five"></div>
</div>
This way your CSS classes change a bit. You have to replace # with a . (dot):
.content { height: 25px; width: 25px; float: left; margin: 10px }
.one { background-color: #FFCCCC; }
...
.five { background-color: #FFFF00; float: right; }
Third solution
This one is very similar to the second one, except that it keeps the IDs of sub DIVs:
<div>
<div id="one" class="content"></div>
<div id="two" class="content"></div>
<div id="three" class="content"></div>
<div id="four" class="content"></div>
<div id="five" class="content"></div>
</div>
And CSS:
.content { height: 25px; width: 25px; float: left; margin: 10px }
#one { background-color: #FFCCCC; }
...
#five { background-color: #FFFF00; float: right; }
You have two options, the first is to use the parent container (in this case the div #content) to set default attributes to each of it's nested divs, to do this you could use code like this:
#content div {
repeat-attributes-here;
}
This will set attributes for every div inside #content.
The second option is to use classes to define the common attributes. The benefit of this is you can still have other divs with different styling options (in case you add something new where you don't want the repeated functionality.
To do this you would do this:
#one {
unique-functionality-here
}
.layout-block {
repeat functionality here
}
Then define the div in the CSS like this:
<div id="one" class="layout-block"></div>
Hope that helps!