Is it possible to separate Stylus definitions with semicolons?
Eg:
div.somclass
color blue; height 20px; border 1px solid blue;
Yep, see http://codepen.io/anon/pen/pJWzzw (view compiled CSS)
div.somclass {
color: #00f;
height: 20px;
border: 1px solid #00f;
}
Related
please I have got below CSS to change mobile add to cart button background to gold color
.add-to-cart-wrap .button::before {
background:gold !important;
}
I'd like to make the border color "purple". Thanks
This solution does what you need:
.add-to-cart-wrap .button {background-color: gold; border: 1px solid purple;}
If button is a standalone element then you can try this.
Update example
As you can see here it works, you just have to figure out if you have other css selectors affecting your button, in that case use them to change the css.
.button {
background: gold;
border: 1px solid purple;
width: 100px;
height: 100px;
border-radius: 100px;
}
<button class="button">Cart</button>
.button {
background: gold !important;
border: 1px solid purple;
}
Otherwise, if button is a class belonging to the tag that contains .add-to-cart-wrap then try this
.add-to-cart-wrap.button {
background: gold !important;
border: 1px solid purple;
}
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*/
}
How can I highlight all spans and divs in my html that have classes that are not styled? this is for debugging purposes, to remind me what I will still have to fix up.
Use border to highlight the span and div elements
Do either:
span, div{
border: 1px solid red;
background-color: yellow;
}
Or:
.unstyledClassOfDivAndSpan{
border: 1px solid red;
}
I would add an XXX class to all the elements, then use this definition:
.XXX {
border: 5em solid red;
background-color: green;
}
Make sure this is at the end of the stylesheet so it doesn't get overridden. Then as elements are done, remove the XXX class.
Please Use this Css Hover Style for highlight all spans and divs in your html
div, span{
border: 1px solid red;
background-color: Black;
}
div:hover, span:hover{
border: 1px solid Black;
background-color: red;
}
OR
*Please Use this Css and Jquery Hover Function for highlight all spans and divs in your html*
.hilight{
border: 1px solid red;
}
$(function(){
$("spna div").hover(function(){
$(this).toggleClass("hilight");
});
});
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;
}