I have a simple problem here. What I need to do is that I need to place a class after span in a button. Like if:
<button class="test-button">
<span>This is button</span>
</button>
<span class="custom"> I need to place this after Test button using :after </span>
So if its not clear, I need to place the custom class after the span of text-button class. I was trying to accomplish this by using
.test-button span:after {
content:attr([class=".custom"]);
}
but its not working ...
content:attr doesn't work quite like that; it fetches the value of an attribute, rather than setting one (see example). I believe you can't set an attribute in that way - you'll have to apply the individual properties of .custom in the :after declaration manually.
Related
I'm looking for a solution to not override styling on table cells during hover IF the cell contains a SPAN tag (this span also has a class applied named isThreshold) OR the div cell contains the class .row_select).
The following works and prevents the override if it contains .row_select, but finding a way to look ahead and see if it contains a span tag doesn't seem to work:
.webix_column > div.webix_cell.gridRowHover:not(.webix_row_select) { //this works
color: red;
}
.webix_column > div.webix_cell.gridRowHover:not(span) { //doesn't work
color: red;
}
EDIT
using the following I almost get there as it doesn't affect the cell, but specifically targets the span tag. Having it not affect the cell at all including the span tag is what I really need if the .webix_row_select and span tag are present.
.webix_column > div.webix_cell.gridRowHover:not(.webix_row_select) > span
//Markup
<div role="gridcell" aria-rowindex="1" aria-colindex="4" aria-level="1" class="webix_cell">
<span class="isThreshold">1</span>
</div>
<div role="gridcell" aria-rowindex="2" aria-colindex="4" aria-level="1" class="webix_cell
row_select">
<span class="isThreshold">1</span>
</div>
Any ideas how I can account for both scenarios onHover? The class .gridRowHover is dynamically injected on hover which is what I have been using to target things.
Thanks in advance
Ok, I discovered that !important was hosing things for me and dropping them and simply targeting the table cell on hover was sufficient enough to do what I needed. And this is why you dont use those (!important) unless you really need to do so.
Thanks to anyone that was looking at this.
Is there any sort of way to select a parent element in sass if the child contains a certain class?
Basically I am using the tooltipster plugin and have this issue
HTML
<div class="tooltipster-content">
<span id="note-options">
<ul>
<li>Create new note</li>
<li>Add new edit note</li>
</ul>
</span>
</div>
CSS
#note-options {
//From here, select the .tooltipster-content parent
ul {
li {
}
}
}
I need to be able to select the .tooltipster-content class based on the id of the span tag.
Tooltipster will always generate with the same HTML structure, but I dont want to change the tooltipster wrapper for all tooltips, I want to do it per each tooltip.
As tooltipster doesn't add your specified id to the parent wrapper for basic CSS editing, the only way I can think of is trying to use the span ID to select the closest .tooltipster-content class.
Is this achievable?
Note - I do not want to use javascript/jquery to fix this, I want to try and achieve it in CSS/SASS.
Nope. There's no way in CSS or any preprocessor that you can travel up the dom to select a parent. JS is the only way.
If you have jQuery, you can simply use .parent().
Can't find the right words to explain so here's a code example:
<button class="btn btn-default">
<i class="glyphicon glyphicon-alert"></i>
<span>button</span>
</button>
<button class="btn btn-default">
<span>button</span>
<i class="glyphicon glyphicon-alert"></i>
</button>
Two buttons, one with a glyphicon at front, one with glyphicon at end
Now let's say we want to add more of a gap between the word and icon:
.btn {
> .glyphicon:first-child {
margin-right: 15px;
}
> .glyphicon:last-child {
margin-left: 15px;
}
}
Works nicely like so: http://codepen.io/anon/pen/wzxRPw
My question... How would this be done without the extra span around the words?
If I remove the span then the glyphicon is the only element, so it's treated as both the first and the last
Edit: Note: My intention in the question is to find out how/if this can be done without adding an extra class, and without the span tag.
I'm aware that maybe the ideal solution is to keep the spans or add a class, I just thought perhaps there was a way to do this in CSS that I had no knowledge of (I'm still learning)
I feel like you're trying to eliminate code that really doesn't need to be eliminated (that's just my opinion). No matter what you do, if you don't wrap the text in a span tag or something of that nature, there's only going to be 1 child element of the actual <button>. Meaning, you won't be able to target anything other than that element without explicitly setting a class or inline styles. The span tags are a great solution, but if you insist on getting rid of them you have a couple of other options (however, I think the span tag is the best):
Create a CSS class that defines margin offset and set that to the according button. So, you'd set a class like .margin-left to one and .margin-right to the other
You can write inline styles for each of the glyphicons.
Like I said above, I think you have the best solution of your options. I don't think there is anything else you can do.
The only reasonable solution without span is to add a class:
<button class="btn btn-default icon-on-left">
<i class="glyphicon glyphicon-alert"></i>
button
</button>
<button class="btn btn-default icon-on-right">
button
<i class="glyphicon glyphicon-alert"></i>
</button>
and style it appropriately. But that creates maintainability issue: while changing content of the button you need to change its class in sync.
I'm not clear what you exactly want to get as the result, still ill tell u some ideas you have to decide whether it suits ur need or not.
If you can you can add between glyphicon and the span
If you remove only span tag then you can set respective margins for span tag instead of glyphicon
I have a <div> classed as class="tooltip" which is normally hidden with display:none.
I would like the <div> to show with display:block when an area of my image-map is clicked. I am planning on using the :target pseudo-class.
Here is the simplified version of my code :
<img id="slot" class="single" src="slot.png" usemap="#slot"/>
<map name="slot">
<area
shape="poly"
coords="30,0,61,15,31,31,0,16"
alt="Slot"
href="#trigger-happy">
</map>
<div class="fixed-container">
<div class="tooltip">
Slot
</div>
</div>
As you can see, the trick is that the href is hidden away within the <area> tag. From what I understand, it is currently impossible to select a parent with pure CSS.
Would you have any suggestions on how to perform this task ? I'm not familiar with JavaScript, so a pure CSS answer would be ideal. I know I'll have to get down to JS eventually however, so a JS fix would also be acceptable if there is no other way.
It should be noted that I can already achieve similar results with the :hover pseudo-class, by applying it to the map tag. When using map:hover, the browser reacts perfectly. However, for actual clicking rather than hovering, I'm not sure I can just use <a> with <map>, it doesn't seem to work.
You are targeting #trigger-happy via href, therefore you would add id="trigger-happy" to the element .tooltip.
Here is a working example.
Updated HTML:
<div class="fixed-container">
<div id="trigger-happy" class="tooltip">
...
</div>
</div>
Use the :target pseudo class to style the targeted element, #trigger-happy.
The base CSS would look like this:
#trigger-happy {
display:none;
}
#trigger-happy:target {
display:block;
}
The downside to the :target approach is that once something is clicked, it is clicked. There isn't any toggling available with this option. I imagine you could use the checkbox hack if you wanted it to be toggleable, otherwise JS would be needed.
I cannot get this work, looks like not possible, that's why i'm asking...
This is the CSS used:
label.btn {
cursor:pointer;
display:inline-block;
}
label.btn>input[type=checkbox] {
display:none;
}
label.btn>input[type=checkbox]:checked~b {
background:red;
}
/* not relevant, just for testing purpose */
#divtest {
margin-top:1500px
}
Following HTML code will check the input, and then style for <b> tag is applied:
<a href="#divtest" id="anchor">
<label class="btn">
<input type="checkbox"/><b>Click should scroll to '#divetest' element and check input for styling!</b>
</label>
</a>
DEMO styling
If i add attribute 'for' to the label to target the anchor tag, the default browser scrolling works, but then no more styling applied:
<label class="btn" for="anchor">
DEMO anchor
Now, the obvious question:
Can i get these both behaviours working together in pure CSS?
An input element inside an a violates common sense as well as HTML5 CR. Nesting two interactive elements raises the issue which element is activated on mouse click.
Instead of such construct, use valid and sensible HTML markup. Then please formulate the styling question in terms of desired or expected rendering vs. actual rendering, instead of saying that “this” “does not work”.
This won't work since the Input:checkbox is INSIDE the <label>. Browsers will set focus on the input upon a click on the label.