I need to hide only the inline style(style="float:left;" from ul tag) when data.unlock_scode value is present. ng-show="data.unlock_scode" is working fine in img tag and I can't use the same in ul tag then it will hide the entire ul section.
<ul style="float:left;">
<li ng-show="data.upfront != ''">Test</li>
</ul>
<img src="u70007.jpg" ng-show="data.unlock_scode" style="float:left;">
You can use ng-style to have condition on your styles
<ul ng-style="{'float': data.unlock_scode ? 'inherit':'left'}">
<li ng-show="data.upfront != ''">Test</li>
</ul>
Use ng-style
<ul ng-style="!data.unlock_scode" style="float:left;">
.....
</ul>
better way is not to add inline style instead use ng-class
.someclass{
add css here..
}
.someotherclass{
add css here..
}
ng-class="{someclass: !data.unlock_scode, someotherclass: data.unlock_scode}"
Related
I have below html code with List items. Here I don't want 'Minutes' list item so I want to hide it. How can I hide this item using CSS. I mean override this style in external css file
<div class="y-dropdown larger open">
<div class="placeholder">Daily</div>
<ul class="items" style="display: block;">
<li>Daily</li>
<li>Weekly</li>
<li>Monthly</li>
<li>Quarterly</li>
<li>Yearly</li>
<li>Minutes</li>
</ul>
</div>
Add CSS display:none for minutes like
li.minutes{
display:none;
}
If you have to overwrite some CSS properties you have to give !important to that property.
Here,
ul.items li.minutes {
diaplay: none!important;
}
~ is for the following sibling selector.
How could il select the class .content in reference to the class .select ?
HTML
<ul>
<li> <a>content</a> </li>
<li> <a class="select">selected li</a> </li>
<li> <a>content</a> </li>
</ul>
<div class="content">
selected content
<div>
CSS (not working)
ul > li > a.select ~ .content {
/* something */
}
It's unfortunately not possible with CSS, but you could use JQuery, i.e. something like
<script type="text/javascript">
$(".selected").parent().parent().siblings(".content").css("color", "red");
</script>
$(".selected") you start at 'a' tag
.parent() move to parent 'li'
.parent() move to parent 'ul'
.siblings(".content") matches all siblings of the 'ul' you are currently at with class #content'
.css("color", "red") do whatever fancy css you like ;)
There's currently no way in CSS to select the class .content in reference to the class .select.
However if you change your markup a little you can do something similar to what you're trying to do using the target pseudo-class
FIDDLE
For my <ul> list, I would like to add a <hr> after each element of a list. The Result should render like:
<ul class="mylist">
<li>
moooo!
<hr width="40%">
</li>
<li>
maaaaa!
<hr width="40%">
</li>
...
</ul>
It is bad style adding <hr> to each <li> so I would like to refractor this using css only. I cannot use:
.mylist > li: after{
content: "<hr>"
}
as content would escape the characters.
I also do not want to use jQuery:
$('.mylist').find('li').append('<hr width="40%">');
So the question is, how could I append <hr width="40%"> to each <li> of a certain list using css3 ?
jQuery Solution
Just realized that you wanted to nest the hr element inside the li before you close it, yes it's perfectly valid, so simply use append(), and note, you cannot do this using CSS only, as you cannot modify DOM using CSS, you need to use jQuery or JS
jQuery("ul li").append("<hr />");
Demo
CSS Solution
If you don't need an extra element, or you don't want a jQuery solution(As you want)
Using hr element as a direct child to ul element is not a valid markup, instead, you can use a border-bottom for each li which will behave same as hr does, still if you want an explicit way to do so, say for controlling the width of the separator without changing the width of li than you can do it like this
Demo
ul li:after {
content: "";
display: block;
height: 1px;
width: 40%;
margin: 10px;
background: #f00;
}
Here, am just creating a virtual block level element, which doesn't actually exists in the DOM, but it will just do the thing which you need. You can just design the element, the same way you style a normal div. You can also use border on this but to keep the thin line horizontally centered, I've assigned height: 1px; and than am using margin to space up.
I think it's better to use CSS for this. for example you can stop using <hr> tag, instead do something like:
<ul class="mylist">
<li>
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
and then with CSS:
.mylist li { border-bottom: 1px solid black; }
There are other options too, for example if you want to show the horizontal line only for some list items, you can give them a class and add a CSS rule only for that class. like this:
<ul class="mylist">
<li class="hr">
moooo!
</li>
<li>
maaaaa!
</li>
...
</ul>
and CSS:
.mylist li.hr { border-bottom: 1px solid black; }
You can use like this:
<ul>
<li></li>
</ul>
<hr/>
Thats simple. If you have nested ul and li then you use li instead of <hr/> or simply <hr/> inside a <li></li> tag. See below. Its purely your choice.
<ul>
<li>
<ul><li></li></ul>
</li>
<li style="height:1px;border:solid 1px #666"> </li> // or you can also use
<li><hr/></li>
<li>
<ul>
<li></li>
</ul>
</li>
</ul>
Tags in content are not allowed and even if it would be very misleading (css { content: "text"}, How do i add tags?)
If you think is wrong to add <hr> in HTML than it is wrong adding with css (if it would be possible) or js. IMHO a first You should try to use border of <li> if result won't be as expected add that <hr>
Insert A Class That Creates A bottom-border: For Each <li>
<!--########## STYLE EACH li USING CLASS ##########-->
<style>
.hr {
width:40%;
border-bottom:1px solid rgba(0,0,0,.7);
}
</style>
<!--########### PAGE CONTENT ############-->
<ul class="mylist">
<li class="hr">
-CONTENT-
</li>
<li class="hr">
-CONTENT-
</li>
...
Try this CSS:
li:after {
content: " ";
display: block;
height: 2px;
width: 100%;
}
I'm working on an e-mail signature (so obviously I don't have an attached .css stylesheet) is there any way to set a link's hover / active color (maybe within the tag?)
Thanks for taking the time to answer :)
Tombs
Duplicate here:
How to write a:hover in inline CSS?
You can't do so within HTML as active and hover are CSS selectors and not attributes. So although you could set the height and width of an object in HTML, you would have to use CSS to use the active and hover selectors.
Like such
HTML
<ul>
<li><a class="links" href="#"> Link1 </a></li>
<li><a class="links" href="#"> Link2 </a></li>
<li><a class="links" href="#"> Link3 </a></li>
</ul>
CSS
ul il a.links:hover{
color: blue;
}
ul il a.links:hover{
color: royalblue;
}
Half of the mail clients do not support this functionality.
See: http://www.campaignmonitor.com/css/
you may only be able to style the active color, with this being a recommended approach
<span style="color:#ff00ff">this is a link</span>
style the <a> tag as well as wrap it in a similar color style <span> tag for reinforcement.
you wont be able to style a hover state with in-line css unfortunately.
source:
http://24ways.org/2009/rock-solid-html-emails/
Try using
<h1 style="---">
like
<h1 style="color:red">hi</h1>
I have this html:
<li class="arrow branches"></li>
<li class="arrow branches"></li>
<li class="arrow branches"></li>
<li class="arrow"></li>
<li class="arrow"></li>
<li class="arrow"></li>
I want to give css commands only for "arrow branches" classes,how can I give them css that wont effect the "arrow" classes?
Create the class .branches:
.branches{
color:#f00;
}
If you want to apply it to only those elements that have branches and arrows then put them together:
.arrow.branches{
color:#f00;
}
But if you want to apply it to more than one class thats easy too:
.branches, .otherClass{
color:#f00;
}
It's extremely simple:
li.arrow.branches
{...styles...}
This selects LI elements with the classes branches AND arrow, but not arrow on its own.
.arrow.branches { // your css }
Works only for elements with both classes.