Is there something clever I can do in CSS to indicate that an element with a particular ID should always use one or more classes? Something like:
#user_info_box {
use-class: ui-widget-content ui-corner-all;
position: fixed;
left: 10px;
...
}
Only, you know, using actual valid CSS properties.
LESS is perfect for this. Specifically, see "mixins".
#user_info_box {
.ui-widget-content;
.ui-corner-all;
position: fixed;
left: 10px;
...
}
You can't do that in CSS, however you may be interested in SASS
#user_info_box {
#extend .ui-widget-content;
#extend .ui-corner-all;
position: fixed;
left: 10px;
...
}
Check out http://lesscss.org/
it will give you more flexibility with your CSS including something similar to what you are asking.
Umm no. You could with javascript/jQuery though.
Related
I'm using in my AngularJS project md-tooltip.
I tried to set the position by CSS by this way:
<md-tooltip class="tooltip" hide-sm hide-xs show-gt-sm><span>{{item.title}}</span></md-tooltip>
and :
.tooltip {
position: relative;
right: 20px;
}
It doesn't work. Is it impossible to do it?
Thanks for help.
Is definitely not impossible. Seems is working on
Fiddle (example here)
just by setting the class.
.tooltip {
position: relative;
right: 20px;}
I would suggest you to use the props of the tooltip if you can ( mdTooltip ) tough.
If your code is still not working, probably something overwrite it. Or is just not working the way you expect it?
Is there any solution how to convert this:
[class*="needle"]:not([class*="__front"], [class*="__back"]) {
position: absolute;
}
to this:
[class*="needle"]:not([class*="__front"]):not([class*="__back"]) {
position: absolute; }
using a SCSS compiler?
I only get:
[class*="needle"]:not([class*="__front"], [class*="__back"]) {
position: absolute;
}
that cannot be interpreted by most browsers.
Many thanks.
I would make use of SCSS for the reason it developed, to make syntax pretty and easy to understand.
[class*="needle"]{
&:not([class*="__front"]){
&:not([class*="__back"]) {
position: absolute;
}
}
}
Should work. Here, & is used to refer the parent. Once you compile it, the resulting CSS would be
[class*="needle"]:not([class*="__front"]):not([class*="__back"]) {
position: absolute;
}
Sorry, I read the question wrong. The above conversion is not possible in SCSS, as that's neither proper CSS syntax nor SCSS syntax.
Currently, :not() selector does only simple matches. The above syntax is a valid one for level 4 selectors, which is in working draft and mostly not available in any browsers.
Also,
<Selector>:not(<Condition1>):not(<Condition2>) {
position: absolute;
}
is not ,
<Selector>:not(<Condition1>,<Condition2>) {
position: absolute;
}
where as first method acts as AND, second one acts as OR.
MDN Docs
W3C Docs
I admit I am fairly new to less. While playing with it to make my site as dynamic as possible I was trying to use less variables so if I had to change something I could just do it in one file.
I have run across an issue though when trying to position elements. For example I have a button that is currently sitting on the left side, but in the future I may want to move it to the right. Normally how you call that is either left:0; or right:0;
Is there a way to make that left, or right a variable?
My css looks like this
.previous{
position:fixed;
left:0; //The left is what I want to declare somewhere else
top:#header-padding;
height:#side-height;
font-size: #button-side-font !important;
}
I have tried something like
#{prevPos}: left;
and then calling
#prevPos: 0;
but it just stopped loading my application altogether.
Mixins (update)
Have you tried using a mixin?
It could look something like this:
.previous {
.previous-position();
font-size: #button-side-font !important;
height: #side-height;
position: fixed;
top: #header-padding;
}
.previous-position() {
left: 0;
// right: 0;
}
To swap the left and right, change the comment in the mixin.
Multiple classes approach (original answer)
I'd actually approach this differently. Instead of having the button styles and positioning in the same CSS rule, I'd have the positioning in a sub-class.
.previous {
font-size: #button-side-font !important;
height: #side-height;
}
.previous-left,
.previous-right {
position: fixed;
top: #header-padding;
}
.previous-left {
left: 0;
}
.previous-right {
right: 0;
}
Then your buttons look like this:
I am on the left
I am on the right
I am not fixed
This way you can update your page pretty quickly without having to tear apart your LESS files and it makes your styles more re-usable.
And yet another answer for how to get it to work in a "variable way" using old-fashioned method (intentionally using the most conservative syntax so it could work even with ancient compilers):
#previous-position: right;
.previous {
position: fixed;
margin: 1em;
font-size: 400%;
.-(left) {left: 0}
.-(right) {right: 0}
.-(#previous-position);
}
This question already has answers here:
Modifying the middle of a selector in Sass (adding/removing classes, etc.)
(2 answers)
Closed 7 years ago.
Is this not documented or just not possible?
#parent {
#child {
width: 75%;
.additional_parent_class & {
width: 50%;
}
}
}
This will basically turn into:
.additional_parent_class #parent #child {
width: 50%;
}
While this makes sense because of the implementation of the ampersand and how it's used. What if I'm trying to get it to achieve this:
#parent.additional_parent_class #child {
width: 50%;
}
The only way I have been able to achieve this is by writing another rule outside of the child declarations:
#parent{
#child {
width: 75%;
}
&.additional_parent_class #child {
width: 50%;
}
}
While this isn't necessarily a 'pain in the butt' in this implementation, it seems counter productive if #child has children of its own that will now need to be duplicated in both rules.
Anyway, maybe I'm just being picky, but it would be great if there were more ways to traverse through the selectors.
Although it is not currently possible, this and many similar improvements to the & syntax are slated for release in Sass 3.3. You can follow the discussion about the feature on the Sass issue here.
I agree it would be very helpful. Unfortunately, it's not currently possible in SASS (or any other CSS preprocessor I know of).
This is capable in v3.4 might be in 3.3 but not sure.
I am not a fan of the syntax though.
& is much easier. Wish there was something like &^ for an alias :)
#parent {
#child {
width: 75%;
#at-root #{selector-replace(&, '#parent', '#parent.additional_parent_class')} {
width: 50%;
}
}
}
I just wondered if this is in some way a css attribute:
http://dl.dropbox.com/u/14645664/fhjfhgf.JPG
Does anyone know ?
Nope, this is definitely not CSS.
However, that doesn't mean you can't do something similar with CSS.
Start with an element with a specific class, like "slashed":
<span class="slashed">True?</span>
Then, CSS pseudo elements/selectors to the rescue!
.slashed:before {
content:"╱";
display:block;
color:red;
font-size:2em;
position:relative;
left:1em;
top:5px;
}
Note that the slash used in the CSS is "╱", not "/", as it gives a better slash effect.
You can obviously tweak it by changing the top, left, and font-size properties.
The end result looks like:
Note that CSS :before won't work in IE7 below, and other (much) older browsers, so you'll want to have some sort of fallback.
http://jsbin.com/ohuxig/edit#html,live
.strikethrough {
position: relative;
}
.strikethrough:before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 1px solid ;
border-color: red;
-webkit-transform:rotate(-5deg);
-moz-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
transform:rotate(-5deg);
}
No, that is in no way a CSS attribute.