Question
I want to access the span text and change its color.
How can I do this in the following setup?
Code
<div class="element">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-play" ng-if="true">button</span>
</button>
<span class="title">Change this color</span>
</div>
Suggestion
span.glyphicon.glyphicon-play[ng-if="true"] span.title {
color:red;
}
This doesn't work unfortunately.
JSFiddle
http://jsfiddle.net/916g3bea/2/
Try this:
span.glyphicon.glyphicon-play[ng-if="true"], span.title {
color:red;
}
Related
I want to remove the word CART and the link applied to it. How can i target it via CSS
<div class="header-contact">
<i class="fa fa-phone"></i>
<b> +(1)-833-869-6433 </b>
<span class="gap">|</span>
CART
</div>
If you only want to hide the link:
.header-contact .gap + a { display: none; }
<div class="header-contact">
<i class="fa fa-phone"></i>
<b> +(1)-833-869-6433 </b>
<span class="gap">|</span>
CART
</div>
If you also want to hide the divider .gap:
.header-contact [href^=tel] ~ * { display: none; }
<div class="header-contact">
<i class="fa fa-phone"></i>
<b> +(1)-833-869-6433 </b>
<span class="gap">|</span>
CART
</div>
Might want to try .header-contact a:nth-of-type(2) { display: none;} if the structure stays always the same.
I have the following structure that I've simplified down, the goal here was to set the span with the class "partA" background color to pink because the input has the class "state".
The internal structure of the "container" cannot change.
So the end result for this example would be the first "Content" label would be highlighted pink.
Note that there can be any number of "container"s in any order throughout the page structure, so just selecting the first container isn't a suitable solution.
<span class="container">
<span class="item">
<span class="partA">Content</span>
<span class="partB">A</span>
</span>
<input class="element state" />
</span>
<span class="container">
<span class="item">
<span class="partA">Content</span>
<span class="partB">B</span>
</span>
<input class="element" />
</span>
I thought the general sibling selector may be the solution, but it doesn't seem to work - I believe because it's a sibling of the parent, not the element itself. I tried both ways round in case I had made a mistake:
.partA ~ .state { background-color: pink; }
.state ~ .partA { background-color: pink; }
I've created a JSFiddle with this structure.
Can anyone provide me a selector which will accomplish this? I would like to avoid JS if at all possible.
CSS renders always in a forward sequence. So, what you want could only work if the input came first in the structure:
.state ~ span .partA { background-color: pink; }
<span class="container">
<input class="element state" />
<span class="item">
<span class="partA">Content</span>
<span class="partB">A</span>
</span>
</span>
<span class="container">
<input class="element" />
<span class="item">
<span class="partA">Content</span>
<span class="partB">B</span>
</span>
</span>
As per this CSS Tricks article
"there are no parent selectors in CSS, not even in CSS3"
The article is worth a read, but I suspect the only way you are going to be able to do this is with javascript.
I'll offer a sort-of-solution that might work for you.
HTML
<span class="container">
<input class="element state" />
<span class="item">
<span class="partA">Content</span>
<span class="partB">A</span>
</span>
CSS
.state ~ .item .partA { background-color: pink; }
This way you swap the DOM elements around, which you than could position with CSS.
See the fiddle here: http://jsfiddle.net/edkyy360/4/
Since it's not possible to back-track selectors using pure CSS
let's find a solution adding the minimal effort:
Place this before the closing </body> tag:
<script>
// Add PINK background to the first `.partA` element whose uncle has `.state`
var stateClass = document.getElementsByClassName("state");
for(var i=0; i<stateClass.length; i++){
stateClass[i].parentElement.getElementsByClassName("partA")[0].style.background = "pink";
}
</script>
var stateClass = document.getElementsByClassName("state");
for(var i=0; i<stateClass.length; i++){
stateClass[i].parentElement.getElementsByClassName("partA")[0].style.background = "pink"
}
<span class="container">
<span class="item">
<span class="partA">Content</span>
<span class="partB">A</span>
</span>
<input class="element state" />
</span>
<span class="container">
<span class="item">
<span class="partA">Content</span>
<span class="partB">B</span>
</span>
<input class="element" />
</span>
I am using bootstrap 3. I want to change button color when I click on button.I mean button should be in different color when it is selected. How can I do this using css?
My codes are :
<div class="col-sm-12" id="">
<button type="submit" class="btn btn-warning" id="1">Button1</button>
<button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>
CSS has different pseudo selector by which you can achieve such effect. In your case you can use
:active : if you want background color only when the button is clicked and don't want to persist.
:focus: if you want background color untill the focus is on the button.
button:active{
background:olive;
}
and
button:focus{
background:olive;
}
JsFiddle Example
P.S.: Please don't give the number in Id attribute of html elements.
CSS has many pseudo selector like, :active, :hover, :focus so you can use.
.btn{
background: #ccc;
} .btn:focus{
background: red;
}
<div class="col-sm-12" id="my_styles">
<button type="submit" class="btn btn-warning" id="1">Button1</button>
<button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>
JsFiddle
HTML--
<div class="col-sm-12" id="my_styles">
<button type="submit" class="btn btn-warning" id="1">Button1</button>
<button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>
css--
.active{
background:red;
}
button.btn:active{
background:red;
}
jQuery--
jQuery("#my_styles .btn").click(function(){
jQuery("#my_styles .btn").removeClass('active');
jQuery(this).toggleClass('active');
});
view the live demo on jsfiddle
Question
I want to access the span glyphicon glyphicon-play and change its color.
How can I do this dynamically, when the user hovers on the whole element?
Suggestion
.whole:hover > span.glyphicon.glyphicon-play {
color: red;
}
This doesn't work unfortunately.
Code
<div class="whole">
<button type="button" class="btn btn-default special">
<span class="glyphicon glyphicon-play"></span>
</button><span class="title">my title</span>
</div>
JSFiddle:
http://jsfiddle.net/grqy6mtp/
Just remove the > parent selector from your code, as it's a descendant, not a direct child.
.whole:hover span.glyphicon.glyphicon-play {
color: red;
}
This should work, just delete >
.whole:hover span.glyphicon{
color:red;
}
DEMO
.whole:hover span.glyphicon.glyphicon-play {
color: red;
}
add a class into span any think you want. like
<div class="whole">
<button type="button" class="btn btn-default special">
<span class="glyphicon glyphicon-play changeColor"></span>
</button><span class="title">my title</span>
</div>
.whole:hover .changeColor{
background: red;
color: white;
}
I am now using Twitter Bootstrap 3 RC2 as well as Twitter Bootstrap which has moved into a separate repository. I have noticed, if used in a button with text the icon is not centered very well:
The icon and the text have the same bottom line, but I believe for a good looking button the icon should be centered based on the text, shouldn't it? Any idea how to achieve this?
http://bootply.com/74652
Move the text out of the <span> with the glyphicon and apply vertical-align: middle; to the <span>
<button class="btn btn-default">
<span class="glyphicon glyphicon-th" style="vertical-align: middle;"></span> Centered
</button>
Demo
This works in Bootstrap 4 with Font Awesome icons like so
<button class="btn btn-default" style="vertical-align: middle;">
<i class="fa fa-times"></i> Centered
</button>
Apply a vertical-align: -{N}px; style on the .glyphicon-th to shift it N pixels up/down.
For some vertical-align might not work due to positioning: If you look into .glyphicon class you'll see it is set to relative, try setting it to 'inherit' e.g:
.glyphicon.v-centered {
position: inherit;
vertical-align: middle;
}
This should also work for icons not in buttons, e.g. tabs.
Try vertical-align: middle; on .glyphicon-th:before
None of the methods above worked well for me by themselves, but using display: inline-block; vertical-align: middle on the elements did. It's the inline-block that seems to be key.
.vcenter * {
vertical-align: middle;
display: inline-block;
}
.btn i {
margin-left: 10px;
font-size: 20px;
}
with
<div class="vcenter">
<button class="btn btn-default btn-lg"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
<button class="btn btn-default"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
<button class="btn btn-default btn-sm"><span>Centered</span><i class="glyphicon glyphicon-ok"></i></button>
</div>
See http://www.bootply.com/UbY78zM8pD for live example.
I managed to do it like this:
.glyphicon.center:before {
vertical-align: middle;
}
and use <span class="glyphicon center glyphicon-th"></span>.
Problem: Glyph icon was 2 px too high above the button text. Fixed it as follows using examples here. Thank you (Alastair Maw).
I managed to get mine working as follows:
HTML
<div class="col-xs-12">
<a title="" class="btn btn-block btn-info oa-btn-spacer_homepage oa-ellipsis" role="button" href="default.aspx?action=page&name=creditcard">
<span class="glyphicon glyphicon-credit-card glyph_Credit"></span> Update Your Credit Card and Billing Information
</a>
</div>
CSS
#panelTopic .glyph_Credit {
vertical-align: middle;
display: inline-block;
padding-bottom:6px;
}
<button class="btn btn-default">
<span class="glyphicon glyphicon-th" style="font-size: 14px;"> </span>
<span style="font-size: 17px;">Not Centered</span>
</button>
please increase or decrease the font size according to your requirement
Other way
<button class="btn default" id="IdBack">
<i class="glyphicon glyphicon-hand-left"></i>
<b>Back</b>
</button>
Add a margin of the specific pixels or percentage. In my app, this worked beautifully, based on the dimensions of the area.
CSS:
.someWrapperClass button span {
margin-top: 120%;
}
HTML:
<div class="someWrapperClass">
<button type="button" ng-click="SomeMethod()">
<span class="glyphicon glyphicon-chevron-left"></span>
</button>
</div>