I know that embedding CSS styles directly into the HTML tags they affect defeats much of the purpose of CSS, but sometimes it's useful for debugging purposes, as in:
<p style="font-size: 24px">asdf</p>
What's the syntax for embedding a rule like:
a:hover {text-decoration: underline;}
into the style attribute of an A tag? It's obviously not this...
bar
...since that would apply all the time, as opposed to just during hover.
I'm afraid it can't be done, the pseudo-class selectors can't be set in-line, you'll have to do it on the page or on a stylesheet.
I should mention that technically you should be able to do it according to the CSS spec, but most browsers don't support it
Edit: I just did a quick test with this:
<a href="test.html" style="{color: blue; background: white}
:visited {color: green}
:hover {background: yellow}
:visited:hover {color: purple}">Test</a>
And it doesn't work in IE7, IE8 beta 2, Firefox or Chrome. Can anyone else test in any other browsers?
If you are only debugging, you might use javascript to modify the css:
<a onmouseover="this.style.textDecoration='underline';"
onmouseout="this.style.textDecoration='none';">bar</a>
A simple solution:
My Link
Or
<script>
/** Change the style **/
function overStyle(object){
object.style.color = 'orange';
// Change some other properties ...
}
/** Restores the style **/
function outStyle(object){
object.style.color = 'orange';
// Restore the rest ...
}
</script>
My Link
If it's for debugging, just add a css class for hovering (since elements can have more than one class):
a.hovertest:hover
{
text-decoration:underline;
}
blah
I put together a quick solution for anyone wanting to create hover popups without CSS using the onmouseover and onmouseout behaviors.
http://jsfiddle.net/Lk9w1mkv/
<div style="position:relative;width:100px;background:#ddffdd;overflow:hidden;" onmouseover="this.style.overflow='';" onmouseout="this.style.overflow='hidden';">first hover<div style="width:100px;position:absolute;top:5px;left:110px;background:white;border:1px solid gray;">stuff inside</div></div>
If that <p> tag is created from JavaScript, then you do have another option: use JSS to programmatically insert stylesheets into the document head. It does support '&:hover'. https://cssinjs.org/
Related
I need to be able to embed HTML snippets (nested elements and CSS) fetched from a remote api inside my document, in a way that their CSS won't affect on my whole document.
I need to fetch (random) gmail messages HTMLs and embed them in my website. The thing is that most messages have their CSS tags to style the message html. The problem is that some of these CSS mess up with my own document CSS. How can I embed an html snippet with CSS, in a way that it will have its own scope and not interact with what's outside of it?
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1>This a gmail message</h1>
<style type="text/css">
h1 {
color: red;
}
</style>
</div>
</body>
</html>
The h1 tag outside the gmail-message div is also affected and is therefore red.
What do I need to do to get around this?
One solution would be to use an iframe.
Another solution would be to extract all css and html, then add an attribute (example: scope) to every html tag inside of gmail-messag.
Then modifiy the css and add an attribut selector.
Example:
<html>
<body>
<h1>Your gmail messages</h1>
<div id="gmail-message">
<!-- Here to be injected automatically. Changing classes, etc is not possible -->
<h1 scoped>This a gmail message</h1>
<style type="text/css">
h1[scoped] {
color: red;
}
</style>
</div>
</body>
</html>
But propably using an ifram is a more easy solution.
Easiest way is to use iframe / object / embed tag (tested on firefox).
If you can use Javascript and HTML5 you can also use shadow DOM or make custom element that uses slot tag (also in shadowRoot).
You might want to look into using The Shadow DOM
An important aspect of web components is encapsulation — being able to
keep the markup structure, style, and behavior hidden and separate
from other code on the page so that different parts do not clash, and
the code can be kept nice and clean. The Shadow DOM API is a key part
of this, providing a way to attach a hidden separated DOM to an
element.
However, be aware this is new tech and, as always, Microsoft browsers don't handle it.
I've found my solution.
First, insert an empty iframe tag somewhere.
<iframe id="iframeTag" src="about:blank"></iframe>
Second, load the html snippet into that iframe, the following way:
var doc = document.getElementById('iframeTag').contentWindow.document;
doc.open();
doc.write(<html_snippet>);
doc.close();
This way the <html_snippet>'s css won't mix up with the outer document's.
Use the srcdoc attribute on iframe to scope your HTML and CSS.
<iframe srcdoc="<p>Hello world!</p>"></iframe>
It's supported on all major browsers: https://caniuse.com/iframe-srcdoc
I'm using bootstrap for a navbar that I like and I use the style.css from bootstrap, but I also want to implement some elements from another framework that has its own style.css. The problem is that the elements appears distorted because the second style rewrites the first.
Is there a way to specify the influence of a style.css?
For example, style_1.css to have influence over:
<header>...</header>
and style_2.css to have influence over:
<main>...</main>
It is not possible to do it directly using those CSS files that are distributed, but you can create namespaces for each CSS framework library (or CSS file) and use that wherever you want to use that framework features.
See How to namespace Twitter Bootstrap so styles don't conflict and Is there any ready to use Bootstrap css file with prefix for more details on how to namespace your style-sheets.
If you're using less, then you can create a namespace by adding a pregfix to bootstrap like this:
.bootstrap-styles {
#import 'bootstrap';
}
/* OR */
.bootstrap-styles {
#import (less) url("bootstrap.css");
}
You can use http://www.css-prefix.com/ to prefix any CSS file and then use it like this:
<header class="bootstrap-ns-prefix> (some bootstrap code inside) </header>
<main class="style2-ns-prefix"> (some other framework/css styles that don't get affected by bootstrap) </main>
EDIT
It does not work automatically, you have to namespace each of your CSS and then use those CSS files instead of the initials. The generator www.css-prefix.com works for me, but it adds some extra classes/namespaces at the beginning/end and before/after each comment; you should check that and correct/delete any errors before you proceed. As I mentioned above, you can use LESS or SASS frameworks to generate those namespaces.
Here is an example of using both Bootstrap and jQuery UI together:
<head>
...
<link rel="stylesheet" href="css/bootstrap_ns.css">
<link rel="stylesheet" href="css/jqueryui_ns.css">
...
</head>
<body>
<button class="btn btn-primary">Test Button</button>
<div class="bootstrap-ns">
<button class="btn btn-primary">Bootstrap Button</button>
</div>
<div class="jqui-ns">
<button id="jqbtn" class="btn btn-primary">jQuery UI Button</button>
</div>
<script type="text/javascript">
jQuery(function($) {
$('#jqbtn').button();
});
</script>
</body>
And the result is this one:
As you can see, all three buttons have the bootstrap button classes btn btn-primary but only the button inside bootstrap-ns container uses the bootstrap styles.
Here you can see a demo page: http://zikro.gr/dbg/html/bootstrap-ns/
Here you can check bootstrap.css and jquery.ui.css generated by www.css-prefix.com and manual cleaned.
I had the same problem and I resolved it like this:
copy the CSS rules you want to use in a specific region.
convert them to SCSS by pasting them in this link: css2scss and then
Click on the arrow (choose SCSS).
copy the SCSS rules result you got, and paste them in this link: scss2css.
wrap the entire SCSS rules with this rule: .wrapper {}
like this:
.wrapper {
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}
/*all other rules*/
}
click on the 'compile' button and wait until you will get all your CSS.
the above SCSS will result like this:
.wrapper a {
color: #007bff;
text-decoration: none;
background-color: transparent;
}
and so All your other CSS rules will be prefixed with the .wrapper class.
Click download button to download your CSS, and then link it to your HTML
page.
to use this CSS only in certain regions warp that region with a div
and give this div a class "wrapper".
<div class = "wrapper">
<a class = "a_Class_From_The_Downloaded_CSS_File"/>
<!-- put here all other HTML tags you want
and add all the class etc. you want from the
CSS file you created.
it will not collide with other CSS class from other
CSS files because of the div.wrapper tag
-->
</div>
Generally not. However you could use the > selector everywhere:
#divtoApplyTo > a {
color: green;
}
So that just all links in that specific div get changed.
This is not possible. Stylesheets are applied to the whole document and not to subsections of it. Whether an element is affected by the rules is then subject to the used selectors. Following of that, when you want a rule to only apply to elements within <header>, they must begin with header > or header (space).
However, from your comments it follows that rewriting all rules is not an option since it's too many. A solution might be to use a preprocessor like SASS.
Example:
Input (SASS)
header > {
div {
color: red;
}
button {
border: 1px solid hotpink;
}
}
Output (CSS)
header > div {
color: red;
}
header > button {
border: 1px solid hotpink;
}
The idea would be to wrap all rules that should only be valid for <header> into an appropriate block and let SASS rewrite the rules for you.
However, this leads to blowing up the overall file size. Also, one should not forget that frameworks also include global rules. Since something like header > html or header > body is bogus, this solution might still require doing manual changes.
Haven't tried it, but found this: The final fix was to use SASS (recommended by someone off-site), as that allows you to nest elements and then automatically produce the final CSS. Step by step the process is: Applying CSS styles only to certain elements
Concatenate the two Bootstrap files (bootstrap.css and
bootstrap-responsive.css) into bootstrap-all.css.
Create a new SASS file, bootstrap-all.scss, with the content div.bootstrap {.
Append bootstrap-all.css to bootstrap-all.scss.
Close the div.bootstrap selector by appending } to bootstrap-all.scss.
Run SASS on bootstrap-all.scss to produce a final CSS file.
Run YUI Compressor on the final file to produce a minimised version.
Add minimised version to head element and wrap everything I want the
styles to apply to in <div class="bootstrap"></div>.
I'm trying to apply background-color when a user mouse hover the element whose class name is "reMode_hover".
But I do not want to change color if the element also has "reMode_selected"
Note: I can only use CSS not javascript because I'm working within some sort of limited environment.
To clarify, my goal is to color the first element on hover but not the second element.
HTML
<a href="" title="Design" class="reMode_design reMode_hover">
<span>Design</span>
</a>
<a href="" title="Design"
class="reMode_design reMode_hover reMode_selected">
<span>Design</span>
</a>
I tried below hoping the first definition would work but it is not. What am I doing wrong?
CSS
/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover
{
}
.reMode_hover:hover
{
background-color: #f0ac00;
}
One way is to use the multiple class selector (no space as that is the descendant selector):
.reMode_hover:not(.reMode_selected):hover
{
background-color: #f0ac00;
}
<a href="" title="Design" class="reMode_design reMode_hover">
<span>Design</span>
</a>
<a href="" title="Design"
class="reMode_design reMode_hover reMode_selected">
<span>Design</span>
</a>
In modern browsers you can do:
.reMode_hover:not(.reMode_selected):hover{}
Consult http://caniuse.com/css-sel3 for compatibility information.
Method 1
The problem with your code is that you are selecting the .remode_hover that is a descendant of .remode_selected. So the first part of getting your code to work correctly is by removing that space
.reMode_selected.reMode_hover:hover
Then, in order to get the style to not work, you have to override the style set by the :hover. In other words, you need to counter the background-color property. So the final code will be
.reMode_selected.reMode_hover:hover {
background-color:inherit;
}
.reMode_hover:hover {
background-color: #f0ac00;
}
Fiddle
Method 2
An alternative method would be to use :not(), as stated by others. This will return any element that doesn't have the class or property stated inside the parenthesis. In this case, you would put .remode_selected in there. This will target all elements that don't have a class of .remode_selected
Fiddle
However, I would not recommend this method, because of the fact that it was introduced in CSS3, so browser support is not ideal.
Method 3
A third method would be to use jQuery. You can target the .not() selector, which would be similar to using :not() in CSS, but with much better browser support
Fiddle
I'm using WordPress to host a blog. They have a tag cloud widget. The tags are like this. The class name changes with each tag
<a class="tag-link-9" title="1 topic" style="font-size: 8pt;">Blah Blah</a>
<a class="tag-link-10" title="1 topic" style="font-size: 8pt;">Blah Blah X</a>
The parent element is <div class="tagcloud">
Normally, with the theme I'm using, I can add custom styles like this
.custom .tag-link-1- {font-size: 10px}
but with the class name changing each tag, I have to constantly add new styles. Is there a way to do a CSS that will capture all the tag-links independent of the number?
Not in a backwards compatible way, no.
CSS 3
a[class^='tag-link-'] {
font-size:10px;
}
I would define a numberless class to hold all the common style info.
.tag-link { font-size:10px; }
Then attach it to each element.
<a class="tag-link tag-link1">Link</a>
You have two options that will work well for you in this scenario.
Option 1: Use CSS Selectors
If your tags are wrapped within some kind of a div, such that:
<div id="tag-cloud">
<a class="tag-link-9" title="1 topic" style="font-size: 8pt;">Blah Blah</a>
.
.
.
</div>
Use this CSS:
#tag-cloud a { ... } /* Each tag will be styled */
Option 2: Use jQuery!
If you can't figure out option 1, you can always use jQuery to style the element:
$('a[class^="tag-link"]').css( ... );
Refer to this for documentation on how to use the CSS function in jQuery
Option 3: Modify the Wordpress Widget file
You could always go into your wordpress files and modify what gets displayed in the output. I'd recommend removing style="font-size: 8pt;" bit, and then using Option 1 to style the links.
The downside to Option 3 is that you lose the Tag Cloud functionality that makes the links bigger when they appear more often. That might not matter to you, but it's something to consider.
If all tags are getting the same style can you not do:
.tagcloud a {font-size: 10px}
If not please clarify your question.
Thanks!
edit if you are not worried about css validation you can use .custom a {font-size:10px !important;} to override inline styles. If using jQuery is an option, remove the inline styles: $('.tagcloud a').removeAttr('style');
I have a button in my web page with class "btnNewL1" . my CSS class is as below
.btnNewL1
{
background: url(../images/btnbgnew.png);
border:1px solid #818181;
padding-left:3px;
padding-right:3px;
font-family:Arial;
font-size:12px;
padding-top:1px;
padding-bottom:1px;
}
When user place the mouse over the button,i want to chnage the appearance like change of bg image and chnage of border color etc... . I want to do this will CSS itself. and it should be be supported by IE6 IE 7 ,Firefox
How to do this ?
Unfortunately :hover pseudo selector is not supported by IE6 on any other element than <a>.
If you wish to implement :hover on IE6, you can:
a) If possible, change your <input
class="btnNewL1" type="button"
value="click me!" /> to <a
class="btnNewL1" href="#">click
me!</a>. You will need to add display:block, and few other CSS rules. This will simply 'simulate' button using <a> tag. This is not perfect solution because sometimes you must use proper <input> (i.e. when using asp.net controls).
b) Use javascript to make workaround, example in jQuery is:
<script type="text/javascript">
$(document).ready(function(){
$("input.btnNewL1").mouseover(function(){
$(this).toggleClass('buttonSelected');
}).mouseout(function(){
$(this).toggleClass('buttonSelected');
});
});
</script>
<input type="button" value="click me!" class="btnNewL1" />
c) Wrap your code like that:
<a class="acont" href="#"><input type="button" value="click me!" /></a>
So you will be able to use CSS:
.acont:hover input { background:red; }
This will do the job, but as far I remember this is not valid HTML (<input> should not be placed inside <a> tag)
Which one you gonna choose - up to you. Main point from this post is, again: :hover pseudo selector can be used on IE6 only on anchor elements
Have a look at pseudo-classes
.btnNewL1:hover{
background: url(../images/different.png);
}
This SO question "How to use ‘hover’ in CSS" might help you.
I think what you are looking for the :hover class.
Here is an example at w3schools.
The example is for color, but I believe you can do this with other styles.
You want the :hover pseudo-class. Use .btnNewL1:hover { ... } for your mouse-over styles.
See also the CSS2 spec for more info on pseudo-classes.
Combine the tw images into one and then change the background position.
CSS sprite
CSS Sprites: Image Slicing’s Kiss of Death