I am trying to add a focus styling to an element. However, I have ::focus and a class .focus. Since I'm using SASS thought it would be easier to create my own style value then #extend it to the two focuses to save on coding.
But whenever I write it, it isn't working and the styling just doesn't appear. If any one has any ideas as to why it would be greatly appreciated thanks.
Heres a small example of the code I've got.
%button-styling {
color: $grey;
%btn-focus {
color: $white;
}
&::focus,
&.focus {
#extend %btn-focus;
}
}
As Sass docs said, any complex selector that even contains a placeholder selector isn't included in the CSS .... So it is not meaningful to put %btn-focus inside %button-styling placeholder. For me these styles in a scss file work fine:
$grey: red;
$white: #FFF;
%btn-focus {
color: $white;
}
%button-styling {
color: $grey;
&:focus,
&.focus {
#extend %btn-focus;
}
}
button {
#extend %button-styling;
}
And in your html you may have something like this:
<div>
<button class="focus">btn-focus</button>
</div>
<!-- or -->
<div>
<button>btn-focus</button>
</div>
Related
My Jekyll blog's theme has a scss file with the following syntax related style in minima.scss:
.highlight {
background: #fff;
#extend %vertical-rhythm;
.highlighter-rouge & {
background: #eef;
}
.err { color: #a61717; background-color: #e3d2d2 } // Error
// more stuff
I want to override the nested .highlight -> .err style only, but I don't want to set the color and bg-color attributes to anything specific, just the default. As in, I want it as if the .err style had never been defined in the first place.
I consume the minima.scss file in a main.scss which (which is the the actual file included in the page), like so:
#import "minima";
.highlight {
.err { ???? }
}
This makes it easy to add styles, easy to extend styles with new attributes, and easy to override specific attributes of styles (since I guess the second mention takes priority), but how do I "delete" style or elements?
#import "minima";
.highlight {
.err {
color: unset !important;
background-color: unset !important;
}
}
Should do the trick. You can read more about "unset" and "!important".
setting the color to inherit will make it take it's parent element color which in this case looks to be white
The answer that's marked correct is not the recommended way at all. In fact, it's a terrible way to override a style.
The correct way to do this:
#import "minima";
.highlight {
&.err {
color: unset;
background-color: unset;
}
}
HTML:
<div class="highlight err"></div>
How to make :hover work in less?
I need to change a button bg-color on hover and I wrote the following code:
.actions-toolbar {
.primary {
display: inline-block;
button{
text-transform: uppercase;
&:hover {
background-color: #df2423;
}
}
}
}
Unfortunately it doesn't work
Look at the resulting CSS and if that makes sense compared to your HTML structure.
Resulting CSS for your Hover-Style will look like this:
.actions-toolbar .primary button:hover { background-color: #df2423; }
One thing I always recommend when writing LESS or Sass or equivalent preprocessor languages: (very) careful with the nesting, it can cause irritiation and problems (very) often!
HTML
<div data-countdown="2016-12-10 01:17:26">
<div class="countdown-text">noch</div>
<div class="countdown-val">2</div>
<div class="countdown-text">Tage</div>
</div>
CSS
.countdown-val {
color: red;
}
.countdown-text {
font-size: 13px;
}
Values from .countdown-val class are not applied. When I change the order of classes within the css file the same thing happens vice versa. I am using a bootstrap built theme, but I cannot explain this behaviour. Can anybody else please?
you just try this.
.countdown-val {
color: #ff0000;
}
otherwise.you can add !important
.countdown-val {
color: #ff0000 !important;
}
CSS is fine.
Check your closing brackets {} in your code.
In your bootstrap file, make sure your classes aren't nested under another class.
seems like some other css is overriding yours
use
.countdown-val {
color: red !important;
}
.countdown-text {
font-size: 13px !important;
}
or change the class names to some other unique names to be sure that the divs style is not affected by other css
I'm working with a project where the placeholder color was defined globally by developer. But now I need to style a form with a different placeholder color. How can I address it correctly?
js fiddle
CSS
::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder {
color: red;
}
::-moz-placeholder {
color: red;
}
:-ms-input-placeholder {
color: red;
}
.box input::-webkit-input-placeholder, .box textarea::-webkit-input-placeholder {
color: blue;
}
.box input:-moz-placeholder, .box textarea:-moz-placeholder {
color: blue;
}
.box input:-ms-input-placeholder, .box textarea:-ms-input-placeholder{
color: blue;
}
Try this code:
http://jsfiddle.net/vyDns/3/
you where close only needed to add .box in front like:
.box::-moz-placeholder
Cheers
Simply because I think the other answer by Filip Huysmans was just copied from Vucko's comment. I am going to also answer it and explain why your code didn't work.
Lets use this one as an example:
.box input::-webkit-input-placeholder {
color: blue;
}
Here you are selecting .box and then trying to find an input to change the placeholder colour. If your code was like this:
<div class="box">
<input placeholder="blue" />
</div>
It would have worked. In the code above you are selecting the class .box and then finding all inputs within it.
DEMO HERE
Now in your code we have:
<input class="box" placeholder="blue" />
So you are already in the input, thats why your code didnt work. There is no input in the input. So taking away input from the CSS and leaving just .box means you are selecting just that input.
.box::-webkit-input-placeholder
DEMO HERE
Hope this explains it well enough for you to understand where you went wrong.
You can reach your target in several solutions.
In the first one, you should change your HTML markup. With your CSS, you first search for the class "box", and the for the input element. So the working HTML markup would be:
<span class="box"><input /></span>
While the span element could be any other element, it should just have the box as class.
Demo 1
The second solution is to write the input (and also textarea) in your CSS in front of the .box element. So you call only input and textarea elements which have the "box" class.
input.box::-webkit-input-placeholder, textarea.box::-webkit-input-placeholder {
color: blue;
}
Demo 2
The last solution is to delete the input and the textarea part. So you'll call all elements, which have "box" as a class.
.box::-webkit-input-placeholder {
color: blue;
}
Demo 3
This worked for me
-webkit-text-fill-color: white;
opacity: 1;
Just add it in the input/text area tag directly
eg. https://codepen.io/anon/pen/LqgOOp
I have this link created in PHP:
echo '<p style="font-family: arial;">Solution name: <a class="expand_suggested_solution" href="#" data-suggestion_id="'.$suggested_solution_id.'" data-problem_id="'.$problem_id.'">'.$solution_name.'</a></p>';
And I have this css for it:
a.expand_suggested_solution
{
color: blue;
}
But I also tried a bunch of different things like
.expand_suggested_solution
{
color: blue;
}
.expand_suggested_solution .a
{
color: blue;
}
But none of those worked :) Any idea of what I am doing wrong? Its probably simple, but I just suck at css sometimes :)
Here it isn't working for some reason: http://www.problemio.com/problems/problem.php?problem_id=223 in the "Existing Group Plans" link
The rule:
.ui-widget-content a {
color: #222222;
}
In the jQuery theme (http://hotlink.jquery.com/jqueryui/themes/base/jquery.ui.theme.css) is more specific, and hence the link will be #222222.
You can make your rule more specific by doing something like:
.problem_comment_text a.expand_suggested_solution { color: blue; }
For an explanation of CSS specificity, see here.
.expand_suggested_solution {
color: blue
}
should work, but to be more precise, you can write it as:
a.expand_suggested_solution {
color:blue
}
The selector would read as "any a element with a class of expand_suggested_solution".
If this is not working, it'll be some other problem. Since you've written PHP here, i would double check to see your link is rendering out correctly to the browser by viewing the source on the executed page.
What text do you actually wish to be blue? The link text or the "Solution name:" text?
If it's the latter, then you need to apply the css to the <p> tag.
Is the link not actually being echo'd to the page or just that it's not blue?
Sometimes swapping the quotes can be easier because you don't have to concatenate the variables ('.') you can just put them in.
echo "<p style='font-family: arial;'>Solution name:
<a class='expand_suggested_solution' href='#'
data-suggestion_id='$suggested_solution_id'
data-problem_id='$problem_id'>$solution_name'
</a>
</p>";
Check the rest of your css for anything that overrides this css rule, eg a {colour: #fff} will override this if written after this rule.
You could always try putting an !important into your declaration to make sure nothing overrides it. eg color: blue!important;
Make sure you have a legitimate Doctype declaration too.
As #wsanville rightfully pointed out, a selector already defined in jquery.ui.theme.css:
.ui-widget-content a {
color: #222222;
}
is more specific than the first selector you tried:
.expand_suggested_solution {
color: blue;
}
Furthermore, your 2nd CSS selector syntax is incorrect:
.expand_suggested_solution .a {
color: blue;
}
Instead you meant:
a.expand_suggested_solution {
color: blue;
}
However, it's still not as specific as the one in jquery.ui.theme.css.
You could try:
.ui-widget-content a.expand_suggested_solution {
color: blue;
}
Or as #Daryl suggested:
a.expand_suggested_solution {
color: blue !important;
}
because the !important declaration will trump any other selector. However, I recommend using it sparingly!