This question already has answers here:
What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB? [duplicate]
(3 answers)
Closed last year.
&:hover{
cursor: pointer;
& .background-image {
transform: scale(1.1);`enter code here`
transition: transform 6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
& .content{
opacity: 0.9;
}
}"
like in & .background-image we have space
&.large{
height: 380px;
}"
but we don't give space here
The & always refers to the parent selector when nesting. Think of the & as being removed and replaced with the parent selector.
If you leave a space after & symbol, this means you are now referring to its' descendants if you don't leave a space, this means you refer to your parent itself.
For example
.container {
&.red {
background-color: red;
}
}
In this case, this will apply red background to the .container element, if it also has a red class attached to it in your DOM.
Example 2
.container {
& .red {
background-color: red;
}
}
In this case, it will make the background to be red-colored to any child, which has a .red class inside a .container element.
More details and complex examples here
Related
i want to customize the color of md-switch without writing alot of angular/js if possible
here how i want it
i was able to get the first , mainly becuse the main theme is solid gren and i used this to make the body of the switch light green
<md-switch ng-change="$ctrl.updateAsset($ctrl.asset,
'disabled')" ng-model="$ctrl.asset.disabled"></md-switch>
md-switch.md-checked .md-bar {
background-color: rgb(212, 255, 186); //light green
}
how would i change the head color (round)? how would i change the color of both head and body of the switch when the switch is off?
What you call the "head" is an element with class md-thumb; the bar, as you note, has class md-bar. Both are colored by their background-color property.
The md-checked class is active when the switch is "on".
md-switch .md-thumb {
background-color: darkgrey;
}
md-switch .md-bar {
background-color: lightgray;
}
md-switch.md-checked .md-thumb {
background-color: darkgreen;
}
md-switch.md-checked .md-bar {
background-color: lightgreen'
}
Obviously you should use the exact colors you want.
You could simplify the above if you're using SASS or LESS, and you may want to look at custom theming if you're planning to change more than this one component.
Edited to add:
To reverse the direction, use the transform property, e.g.
md-switch .md-thumb-container {
transform: translate3d(100%, 0, 0);
}
md-switch.md-checked .md-thumb-container {
transform: translate3d(0, 0, 0);
}
Add vendor prefixes as necessary for your browser support requirements.
I want to use both [href*="foo"] and :last-of-type. I can't find a combination that works. The output is like:
Artist Name
Genre
Genre
Topic
Topic
Topic
.tags a[href*="genre"]:last-of-type { margin-bottom: 1rem; }
I want to style some bottom margin on the last "artist" and the last "genre". Here's a fiddle: https://jsfiddle.net/40whp0ph/. Note that the margin-bottom for Artist and the last Genre are what I want, but not the margin-bottom for the first Genre.
Can anybody point me to how to remove the margin-bottom from all but the last Genre?
Thanks!
The solution is the totally underappreciated + combinator.
With this, we can give some selector a style, and then reset the style for the same selector if it occurs again directly after. In other words, give the style only to the first element with this class.
.tags a { display: block; }
.tags a[href*="genre"] { margin-top: 1rem; }
.tags a[href*="genre"] + a[href*="genre"] { margin-top: 0; }
.tags a[href*="topic"] { margin-top: 1rem; }
.tags a[href*="topic"] + a[href*="topic"] { margin-top: 0; }
<div class="tags">
<h3>Tags</h3>
Artist: Glad
Genre: A Capella
Genre: Hymns
Topic: Faith
Topic: God
Topic: Prayer
</div>
Or, if you are sure there won't be anything else in the div except the elements, you can shorten the css to something like this:
.tags a {display: block;}
.tags a:not([href*="genre"]) + a[href*="genre"],
.tags a:not([href*="topic"]) + a[href*="topic"] {margin-top: 1rem;}
I'm using Atom 1.15.0 on Mac Sierra. I wanted to change the mouse cursor from a thin bar to something more visible, like a block. I opened my styles.less file and added
atom-text-editor .cursor {
transition:opacity 0.5s linear;
}
and then restarted Atom, but my mouse cursor appears as before (a thin line). How do I change it?
Edit: INcluding my styles.less file
/*
* Your Stylesheet
*
* This stylesheet is loaded when Atom starts up and is reloaded automatically
* when it is changed and saved.
*
* Add your own CSS or Less to fully customize Atom.
* If you are unfamiliar with Less, you can read more about it here:
* http://lesscss.org
*/
/*
* Examples
* (To see them, uncomment and save)
*/
// style the background color of the tree view
.tree-view {
// background-color: whitesmoke;
}
// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
// color: white;
// background-color: hsl(180, 24%, 12%);
}
// style UI elements inside atom-text-editor
atom-text-editor .cursor {
transition:opacity 0.5s linear;
}
.editor .cursor {
position: absolute;
border: 1px solid;
background-color: rgba(244,100,122,0.6);
}
atom-text-editor .editor-contents--private { cursor: default; }
I would direct you to this package:
https://atom.io/packages/block-cursor
Also: Changing cursor style of atom editor
Update:
These properties should apply to the mouse cursor as they do with the text cursor. As long as they're directed properly.
Try Adding this to the StyleSheet:
atom-text-editor .editor-contents--private {
cursor: default;
position: absolute;
border: 1px solid;
background-color: rgba(244,100,122,0.6);
}
Insert this into your styles.less
atom-text-editor .editor-contents--private { cursor: default; }
atom-text-editor {
cursor: url(/home/thedude/Pictures/ico/octocat_mini.png), auto;
}
Atom with Octocat mouse pointer
I can confirm that this line allows for the mouse cursor to be changed, but only when in the editor or in search boxes ,etc. The typing cursor is the purple thingie after the } at the end.
I'm going to create a less code that will give different background-color to element depending on it's class. This will be for list of attachments, so class name is based on attachment extension.
I do support some typical extensions:
.label{
&.label-pdf{
background-color: #c70000;
}
&.label-doc, &.label-docx, &.label-odt{
background-color: #157efb;
}
&.label-xls, &.label-xlsx, &.label-calc{
background-color: #069e00;
}
&.label-ppt, &.label-pptx, &.label-odp{
background-color: #9e3c15;
}
&.label-jpg, &.label-png, &.label-gif, &.label-png, &.label-ttf{
background-color: #95009e;
}
}
but the problem is with some unusual extensions, or even files like: jpg, jpeg, doc, docx, this is why I would like to use expression from CSS. In pure CSS I could use:
.label.[class^="label-"]{
background-color: rgba(0,37,100,0.4);
}
And put this code at the beginning so other classes could override this one.
But unfortunately this sign ^ (I suppose) is breaking my Less compilation. I have been trying to do something like this:
~".label.[class^='label-']{
background-color: rgba(0,37,100,0.4);
}"
AND
.label{
&.~"[class^='label-']"{
background-color: rgba(0,37,100,0.4);
}
}
But still not working. So is it possible to use this selector?
It is not working because your syntax seems to be wrong and not because of any issues with Less.
The below code is invalid because of the . present between the label and the class^="label-"]. Attribute selectors do not require a . before them. It is necessary only for class selectors.
.label.[class^="label-"]{
background-color: rgba(0,37,100,0.4);
}
The correct version would be the following:
.label[class^="label-"]{
background-color: rgba(0,37,100,0.4);
}
and so in Less terms, if you want nesting, it would be as follows:
.label{
&[class^='label-']{
background-color: rgba(0,37,100,0.4);
}
}
.label.[class^="label-"] { /* this won't work */
background-color: rgba(0, 37, 100, 0.4);
}
.label[class^="label-"] { /* this will */
color: green;
}
<label class='label-a label'>Label A</label>
<label class='label-b label'>Label B</label>
Another thing to note is that the ^= is a starts with selector and so when your element has more than one class, the class that resembles label- should be the first class in the list and not the label. If we make the label as the first class then (like seen in below snippet) it won't work because then the class doesn't start with label-.
If the first class in the list is indeed label then you should consider using the *= (contains) selector. But be careful when using the contains selector because it will sometimes select unintended elements like those with class label-not, not-label etc.
.label.[class^="label-"] { /* this won't work */
background-color: rgba(0, 37, 100, 0.4);
}
.label[class^="label-"] { /* this won't too */
color: green;
}
.label[class*="label-"] { /* this will */
border: 1px solid green;
}
<label class='label label-a'>Label A</label>
<label class='label label-b'>Label B</label>
I have same problem. I use this in less file.
[class^="customForm-"] { ... }
But for my HTML it does not works.
<div class="form form-01 customForm-radioList">...</div>
The problem is in tha fact that string "form form-01 customForm-radioList" does not starts with "customForm-" it starts with "form".
Solution
Use contains selector W3 school.
[class*="customForm-"] { ... }
I want to test Polymer applications with non-Shadow-DOM capable browsers like Firefox, PhantomJS, and maybe others using WebDriver.
WebDriver commands for Firefox and PhantomJS fail when I use something like
driver.findElement(const By.cssSelector('* /deep/ #some-div'));
Are there some rules how to best translated/approximate these selectors when the polyfills can not be applied:
/deep/
::shadow
:host()
:host-context()
:content
I would like to create a function that translates such selectors automatically to non-shadow-DOM selectors for browsers that don't support them before sending the request and for that I need to know how to translate them.
Question is a bit old, but in case you haven't figured it out yourselves yet.
/deep/ (deprecated): As you said in your answer, just removing it should work in most of the cases.
::shadow (deprecated): Can also just be removed. Replacing it with > might not work if node which you are targeting is not an immediate child of host element's shadow root.
:host() pseudo classes is used to select custom element from inside shadow-dom, in non-supported browsers it will be equal to selecting parent from child element. Since we don't have parent selectors in css and you are writing js for conversion, you can identify tagName of host element and use it instead of :host selector. Something like below:
:host {
opacity: 0.4;
transition: opacity 420ms ease-in-out;
}
:host(:hover) {
opacity: 1;
}
:host(:active) {
position: relative;
top: 3px;
left: 3px;
}
/*Convert it to*/
x-element {
opacity: 0.4;
transition: opacity 420ms ease-in-out;
}
x-element:hover {
opacity: 1;
}
x-element:active {
position: relative;
top: 3px;
left: 3px;
}
:host-context(<selector>) pseudo class matches the host element if it or any of its ancestors matches <selector>. for example:
Below rule will apply on custom element only when it's a descendant of an element with the class .different.
:host-context(.different) {
color: red;
}
<body class="different">
<x-foo></x-foo>
</body>
It won't be very easy to replace this one with anything simple. Even webcomponents polyfill doesn't attempt it. I can't think of any css only way to achieve this.
::content targets distributed child nodes of host element, i.e. all elements which are picked to display using content selectors. Replacing ::content selectors with tagName of host elements should work here. i.e.
::content > h3 {
color: green;
}
/*replace it with*/
x-element h3 {
color: green;
}
Note that I have removed child selector > also from above, because in non-supported browsers after distribution h3 won't be a direct descendant of x-element anymore. Given the way content selector is used, I'd suggest removing child selector also wherever available.
/deep/ can just be removed
::shadow can be replaced by >
don't know about the others yet