I am trying to apply some rules on a set of img elements whose id begins with "sth". I know how to select them:
img [id^=sth]
But is there a way to use this image specific id inside the selector? In other words, can I somehow do this:
img [id^=sth] {
src: id;
}
You can't do that with css but you can use jQuery:
$("div[id^='sph']").each(function() {
$(this).attr("src", this.id);
});
You can only use an attributes value in a pseudo element :before or :after via the content attribute:
div:after{
content:attr(id);
}
Related
I have this LESS:
LESS
custom-component {
.random-class {
.decorator-class& wrapper {
...
}
}
that yields
CSS
.decorator-classcustom-component .random-class wrapper {
...
}
which outputs gibberish because there is no such class .decorator-classcustom-component. This happens because the uppermost parent selector is an HTML element tag and not a class or other selector type.
Is there a way to get the characters before the ampersand (.decorator-class) to concatenate on the right side of the uppermost parent selector? Like this:
custom-component.decorator-class .random-class wrapper
?
Note that attempting,
custom-component {
.random-class {
&.decorator-class wrapper {
// ^ ampersand at the beginning of selector
...
}
}
would yield,
custom-component .random-class.decorator-class wrapper
I find it really useful to translate CSS selectors to English for debugging in situations like this. Your desired selector custom-component.decorator-class .random-class wrapper translates to:
Select wrapper elements inside an element with a class random-class, inside a custom-component element with the class .decorator-class.
If that's what you mean, then you need something like this:
custom-component {
&.decorator-class {
.random-class wrapper {
...
}
}
I am trying design a css for a dynamically generated Label. I am trying to write css for For attribute of label which can have the anything+Textbox. My prefix can be anything and suffix remain same. and I tried this
label[for=*+"TextBox"]
{
color:#DD4B39;
font-size:smaller;
}
How to write css for above situation? Any help are surely appretiated.
CSS selector
This will select every <label> element whose for attribute value contains "TextBox"
label[for*="TextBox"]{
color:#DD4B39;
font-size:smaller;
}
This will select every <label> element whose for attribute value ends with "TextBox"
label[for$="TextBox"]{
color:#DD4B39;
font-size:smaller;
}
css Selector
label[for$="TextBox"]
{
color:#DD4B39;
font-size:smaller;
}
Try doing something like this:
label[for$="TextBox"]
{
...
}
More info at link
Ember Handlebars is messing with adjacent sibling CSS selectors (el + el)
For example, I have list of items:
{{#each item in items}}
<span class="item">{{item}}</span>
{{/each}}
And I want to add spacing between them with this rule:
.item + .item {
margin-left: 1em;
}
But it doesn't work, because Ember is inserting Metamorph placeholders between items (tags like <script id="metamorph-1-end" type="text/x-placeholder"></script>)
What should I use instead of adjacent sibling selector with handlebars?
Use general sibling (or next sibling) selector (el ~ el).
Like this:
.item ~ .item {
margin-left: 1em;
}
It will 'skip' Metamorph placeholder tags and any other tags between items.
Use Ember.CollectionView and corresponding helper instead of {{#each}}
{{#collection contentBinding=items}}
<span class="item">{{this}}</span>
{{/collection}}
It will wrap everything in a tag (you can customize it with tagName parameter), but it won't insert Metamorph tags between items.
In my case I wanted to use the following CSS so that every time the class on the item switched from .mine to .theirs and vice versa, the position changed. This is the perfect use case for the CSS adjacent sibling selector, but turns out to be slightly complicated to get the markup setup for that selector in ember.
app.css
.mine + .theirs,
.theirs + .mine {
margin-top: -50px;
}
items.hbs
{{#collection Ember.CollectionView
contentBinding='controller.items'
itemViewClass='App.ItemView'}}
markup/content you want inside each EventView e.g., {{ this.name }}
{{/collection}}
item_view.js
App.ItemView = Ember.View.extend({
tagName: 'span',
classNames: ['item'],
classNameBindings: ['side'],
side: function() {
// Check a property on the item to see whose it is,
// set the class accordingly.
return this.get('context.isTheirs') ? 'theirs' : 'mine';
}.property()
});
I was wondering how I could set up css pseudo classes, specifically hover so when I hover over an element, like a div with an id, the properties of a different div with an id get changed?
so normally it would be this:
#3dstack:hover {
listed properties
}
I'm not sure what the change would be to have it hover on div with the id 3dstack and have it change another div.
I do not think that is possible unless the element you want to change the properties of is a descendent or a sibling of the hovered element, in which case you can do:
#myElement:hover #myElementDescendent {
background-color: blue;
}
/*or*/
#myElement:hover + #myElementSibling {
background-color: blue;
}
Of course you can always use jquery to do this:
$("#anelement").hover(
function() {
$("otherelement").css("background-color", "blue");
});
See the differences here
This is not possible with CSS alone. You'll have to use a JavaScript event handler. For example, with jQuery's hover:
$('#3dstack').hover(function() {
$('#otherID').toggleClass('properties');
});
DEMO
Visually you can do this using LESS, but under the hood it's actually using JavaScript.
If I have a dozen CSS selectors, and want to assign :hover properties to all of them, I'm used to doing this:
selector, selector2, someOtherSelector, someSelector div {
//some properties
}
selector:hover, selector2:hover, someOtherSelector:hover, someSelector div:hover {
//some properties
}
Typing :hover four times seems redundant. Is there a way to group the selectors like
(selector, selector2, someOtherSelector, someSelector div):hover {
//some properties
}
instead?
Not natively in CSS. By using something like SCSS, you can write:
selector, selector2, someOtherSelector, someSelector div {
// some properties
&:hover {
// some more properties
}
}
If they all share the same hover properties you could create a class that is shared for all that defines your :hover
So you'd get:
allSelectors, selector, selector2, someOtherSelector, someSelector div {
//some properties
}
allSelectors:hover {
//some properties
}
Re-usable classes makes for cleaner and less code.
Sadly, there's not really any easier way of doing what you're trying to do, unfortunately. Unless you want to move the styles to jQuery or something (but that's not a good solution).