This is my HTML:
<p class="define"><a class="term" href="#jump" name="jump">jump</a> - Some description</p>
When the browser jumps to #jump I want to highlight the .define class. If I do;
a.term:target { background-color: #ffa; -webkit-transition: all 1s linear; }
I of course only highlight the a. How do I modify this to complete p? I tried a couple of variants like the one below, but none of them work.
a.term:target .define { stuff here }
a.term:target p.define { stuff here }
a.term:target p { stuff here }
jsFiddle: http://jsfiddle.net/vVPPy/
You can't modify the parent of an element using css. You will have to use a javascript alternative.
You will not be able to determine where the user is on the page using CSS. This can be accomplished with JavaScript - If you're not trying to reinvent the wheel, I'd recommend using Bootstrap's ScrollSpy.
Your <p> tag isn't the target of anything. If it were:
<p class="define" id="something">
<a class="term" href="#something" name="jump">jump</a> - blah
</p>
You could style it like so:
a.term:target { background-color: #ffa; }
but that has nothing to do with the <a> actually being clicked on. You'll need to use an onclick handler for that, ideally adding a class to the target and styling based on that class.
Related
I have the following in my css file:
md-menu-content.md-menu-bar-menu.md-dense .md-menu > .md-button:after{
display:none;
}
And here's my HTML:
<md-menu-content class="ZZZ">
Hello
</md-menu-content>
I have some Javascript (material design) that adds lots of stuff to the <md-menu-content> elements.
I would like to apply the above CSS to certain <md-menu-content> elements (only if they have the ZZZ class) and leave all others behaving as normal. I'm very stuck. Is this possible in CSS?
To apply the css that you want to all items of the ZZZ class, you should use code like this:
.ZZZ {
//your code here
}
The . before the ZZZ signifies that it applies to items with the class ZZZ. This can be done with any class, as all you have to do is put a . (period) before the class name.
I think you are over thinking this, just use the css styling like you would any other time, and it works just fine. See fiddle: https://jsfiddle.net/pyexm7us/3/
HTML
<md-menu-content class="ZZZ">
Hello
</md-menu-content>
<md-menu-content>
World
</md-menu-content>
CSS
md-menu-content{background-color: red; color: white;}
.ZZZ{background-color: blue; color: white;}
This is absolutely possible with CSS
To apply styling to elements with the same class simply use the prefix .
.ZZZ {
//styling for elements with class ZZZ
}
If you want to work with id's then use the prefix #
#ZZZ {
//styling for elements with the ID ZZZ
}
please check first the demo on plnkr.
My problem is: this animation will be applied to all elements in html,
cause in css is defined .ng-enter .ng-leave etc.
I am trying to apply it to a specific class name. In my case, it's <li class="specific">
And in CSS I've tried following:
.specific.ng-enter /*(does not work)*/
.specific-ng-enter /*(does not work)*/
With these code above, I can add and remove items but without animation.
How should the code be in css ?
Actually, there are a couple of possible issues with the code:
You are using ngRepeat on your <ul> (I cannot be 100% sure that this is not what you want but it is highly improbable). ngRepeat will "repeat" (clone" the element it is on, so in your case you are creating multiple <ul> elements (instead of multiple <li> elements, as one would expect).
Moving ngRepeat o the <li> will solve the animation problem and result in the intended HTML code (1 <ul>, multiple <li>).
Your CSS defined transition with every class, while it would suffice to define one rule:
.top.ng-enter, .top.ng-leave {
// ...define transitions here
}
In order to avoid possible CSS specificity issues (especially later on, when your CSS grows in size and complexity), you should include the .ng-enter/leave class selector in the rules with .ng-*-active:
// Instead of just:
.top.ng-enter-active {...
// You should use:
.top.ng-enter.enter-active {...
Finally, you can group identical rules together, to save space and make your code more DRY (e.g. .top.ng-enter rule === .top.ngleave.ng-leave-active rule).
Your final code should look like this:
<!-- HTML -->
<ul>
<li class="top" ng-repeat="item in items">{{item}}</li>
</ul>
/* CSS */
.top.ng-enter,
.top.ng-leave {
-webkit-transition: 1s;
transition: 1s;
}
.top.ng-enter,
.top.ng-leave.ng-leave-active {
margin-left: 100%;
}
.top.ng-enter.ng-enter-active,
.top.ng-leave {
margin-left: 0;
}
See, also, this short demo.
Just give class to your <ul> like this.
<ul class="my-anim" ng-repeat="item in items">
<li class="top">{{item}}</li>
</ul>
Working Demo
I have a set of div whose visibility is set to either hidden or visible. Based on this css visibility property i need to add the css property on those div, like
<div class="div-class" style="color:#ff0000; margin: 0px 10px; visibility:hidden;">
[Block of Code]
</div>
Now i need to define the following in style.css file.
.div-class:visible {top:10px;left:50px;}
.div-class:hidden {top:0px;left:0px;}
Is this possible???
yes with css attributre selectors you can do it
try the below css:
.div-class[style*="visible"] {
color: green;
}
.div-class[style*="hidden"] {
color: red;
}
What you are trying to do is not "really" possible.
I mean it's ill thought by design in the first place.
Even Vamsikrishna's solution might not work as expected.
If you set the overflow property to hidden via javascript or inline styles, the .div-class[style*="hidden"] rule will apply since the style attribute will contain the hidden string.
Moreover , setting inline styles on html elements is bad practice itself in most cases.
I suggest you try and learn css principles a little more.
I'd do the following:
HTML
<div class="div-class div-hidden">
[Block of Code]
</div>
CSS
.div-class {color:#ff0000; margin: 0px 10px; top:10px;left:50px;}
.div-hidden {visibility:hidden;}
.div-class.div-hidden {top:0px;left:0px;}
Then you can use javascript to toggle the "div-hidden" class.
You can do something using attrchange - a jQuery plugin ,
like this:
Add "attrchange" script into HTML page like
In Javascrip catch event
var email_ver_input = $("input#email_ver_input.verifyInput");
email_ver_input.attrchange({
trackValues: true,
callback: function (event) {
if (email_ver_input.is(":visible")){
$("#inputcode_wrap").show();
}
}
});
I have a Submit Button like this:
<input type="submit" data-corners="false" id="code_check_button" tabindex="5" data-rel="external" value="GO">
which - with a custom css theme - outputs this: http://sht.tl/59y3m
Now I would like to use the id (#code_check_button) to style the button with more specificity.
Unfortunately jquerymobile automagically transforms the input type submit in a snippet of code I cannot control: http://sht.tl/cQq
As you can note, the original button ID is useless...
Can you tell me how may I custom style that button (of course, without wrapping it in an extra tag...)?
Thank you!
Numerous ways this can be achieved..
Here are a few examples:
submit {
styles:styles;
}
Not the most compatible in older browsers:
input[type="submit"] {
styles:styles;
}
Then you can target the ID:
#code_check_button {
styles:styles;
}
In your stylesheet add the ID #code_check_button and provide the desired style you want.. see example below :-
#code_check_button {
your desired style properties here...
}
EDIT:
You can use the class of the generated div and style the button accordingly. In this generated snippet you have two elements to style. please find below :-
.ui-btn {
style properties here...
}
.ui-btn .ui-btn-text {
style properties here...
}
CSS
#code_check_button {
color:#000 !important;
width:200px !important;
}
You can see I have added !important tag in all the css properties. This is because of overwritten the jQ mobile default styles.
If something keeps changing your intended css into useless code, this may be a situation where you would resort to simple text (eg. nano for mac or notepad for windows) Web design programs are double edged swords, most of the time the bells and whistles on these programs help make things easier, but sometimes they can make things more complicated. To custom style a button all you have to do is put your id or class selector name in the input tag and then enter the css for it. For example
CSS
#code_check_button { background-image: url(/*desired image url*/);
background-color: /*desired background color*/;
color: /*desired font color*/; }
HTML
<input id="code_check_button" type="submit" name="submit">
Just try it in notepad this time.
I have the following
<p class="main yellow">Hello World</p>
I would like to write a css element that refers to only elements with main and yellow. Is there a way to do this?
Eg. the following doesn't work, but would be what I'm after
.main + .yellow { color:green }
This should grab it:
.main.yellow { color:yellow; }
Though you may get differing results in different browsers. I use QuirksMode to get an idea of what will/won't work cross browser.
You just need to specify them as
.main.yellow { color: green; }
No space between the two classes.
does this work for you?
.main.yellow{
color:green;
}
As others have already said, what you want is:
.main.yellow { color:green; }
However, let me quickly explain why your first attempt didn't work. The + keyword refers to a following element, i.e. the element after.
Your example would have matched the following HTML...
<p class="main">Hello</p>
<p class="yellow">World</p>
...and styled the second paragraph (.yellow) green. So ".main + .yellow" means "select a .yellow that is immediately after a .main".