Currently in java I am generating an HTML document with applicable CSS styles.
I have verified that my document is correct, however it appears that the :first pseudo selector is not working when I use it in conjunction with a named page. as an example:
#page mainReport:first {
#top-center {
content: element(header);
vertical-align: bottom;
};
#bottom-center {
content: element(footer);
vertical-align: top;
};
}
The reason for me doing this is that I want to use the first page on a specific named page, does the CSS selector support this functionality for paged media? And if not, is there a work around for this issue, either through flying-saucer or some sort of CSS magic.
Thanks
Related
Using a child theme on my wordpress to update css.
Using the parameter:
.homepage .title {
color: ffffff;
}
There is an index css that seems to be interfering (index:58)? I can't seem to locate that line in any of my theme parent files. Is there something I am missing?
You have inline the css in the head of HTML. If you click on the (index:58) in developer tools it will show you the code that's applying the style.
Simply remove the .homepage .title { color: #000000} from the head of the html
Inlined CSS rule in the head of HTML
I have three big CSS files which have many classes. Same of those classes have the same name but are in different files.
Example:
CSS1:
...
.btn-primary {
background: #000;
}
...
CSS2:
...
.btn-primary {
background: #fff;
}
...
and CSS3:
...
.btn-primary {
background: #4285F4;
}
...
Let's assume that all three CSS are called in my HTML page.
Is there a way to select in my web page only the .btn-primary class from CSS3? If yes, how could I do it?
No.
If a stylesheet is loaded into a page, and it has a ruleset with selector that matches an element, then it will apply to that element.
Rules which provide conflicting information for a particular property will overwrite each other in the standard cascade order.
Not as is, but you could alter your style sheets so that it reads like this:
.btn-primary, .btn-primary.style1 { ... }
.btn-primary, .btn-primary.style2 { ... }
.btn-primary, .btn-primary.style3 { ... }
Then you could get the specific styles by using the following class:
<a class='btn-primary style2'>Stylesheet 2</a>
In short, you'll need to add some sort of additional method of narrowing down the different styles.
--
Another possibility would be to convert your css files to scss like so:
.style1 {
.btn-primary { ... }
}
You could then use the styling from specific sheets like so:
<div class='style1'>
<a class='btn-primary'>Stylesheet 1</a>
</div>
An apologetic into: the following is, in my opinion, a wrong solution. I wanted to add it as I can think of situations where you have to find this kind of hacky ways rather than change the css files.
Generally speaking, as Quentin and Bryant pointed out - there is no "namespacing" for css files and so if you load all the css files you will end up with the last overriding file's selector classes (among the name-conflicted ones) and won't be able to choose between them.
If (for some odd reason) you don't care about Chrome users - you can probably use the cssRules or rules properties of the document.styleSheets[i] object - for each loaded stylesheet file (i being the number of the file). As noted, this method does not work for Chrome. Fore some reason both cssRules and rules are null in Chrome for each of the styleSheets[i].
My hacky solution:
After loading all the css files as you need,
In javascript code, read the css file you choose as a text file. You can use AJAX for that - see this question and its answers
Search for the selector you want in the text you got and extract that string. You can parse the whole file for example and take the relevant part.
In searching how to help with this step I came across the document.styleSheets[i].cssRules object and the method that doesn't work in Chrome.
Build a style element around it and append that style element to the head element (here's an answer that shows how to create and append style elements to the head element).
This seems like a wrong way to do it from several reasons (performance, elegance, readability) - and probably means the design of the css files is not right for your project (look at Bryant's suggestions) - but I wanted this answer to be here, as there is a way to do it, albeit a hacky one, and if for some reason you can't change the css files and have to use them as is - then here you go.
I don't know what is the usage of this, I mean having three files and storing different styles and even same styles into them.
But there are some tools that will normalize and minify your CSS, for example, take a look at Nano CSS
But, as other answers says it is not possible to say what class from what file apply to this page, and they will overwrite and the last style will apply for the element.
Here is also an example to find out how overwrite works:
#test-link {
display: block;
text-decoration: none;
background: red;
color: white;
}
#test-link {
background: green;
}
#test-link {
background: orange;
}
#test-link {
background: black;
}
<a id="test-link" href="javascript:void(0);">Test link</a>
As you see, just the last style applied for the background color
I have a print HTML file.
I can set the footer using CSS/SCSS like this:
#page {
#bottom-center {content: "Copyright AMCE Pty Ltd";}
}
Problem is, CSS/SCSS are static. The Ruby On Rails pipeline compiles them once on production when you push them to the server.
How can I set a different footer for each HTML print document using Rails?
Refer to an attribute value:
#page {
#bottom-center { div.my_placeholder {content: attr(data-footer-text);} }
}
The actual text is the value of the data-footer-text attribute. The div element serves the only purpose of carrying the attribute containing the daat to print.
Of course, this approach will only work if your application can modify the html accordingly.
I would like to distinguish between external and internal links using just CSS.
I would like to add a small icon to the right side of these links, without it covering up other text.
The icon I would like to use is the icon used on Wikipedia.
For example, this is an external link:
StackOverflow
This is an internal link:
home page
How can I do this using just CSS?
demo
Basics
Using :after we can inject content after each matched selector.
The first selector matches any href attribute starting with //. This is for links that keep the same protocol (http or https) as the current page.
a[href^="//"]:after,
These are the traditionally more common urls, like http://google.com and https://encrypted.google.com
a[href^="http://"]:after,
a[href^="https://"]:after {
We can then pass a url to the content attribute to display the image after the link. The margin can be customized to fit the
content: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png);
margin: 0 0 0 5px;
}
Allow certain domains as local
Let's say we're on example.org and we want to mark links to blog.example.org as on the same domain for this purpose. This is a fairly safe way to do it, however we could have a url like http://example.org/page//blog.example.org/
note: make sure this comes after the above in your styles
a[href*="//blog.example.org/"]:after {
content: '';
margin: 0;
}
For more strict matching, we can take our initial settings and override them.
a[href^="//blog.example.org/"]:after,
a[href^="http://blog.example.org/"]:after,
a[href^="https://blog.example.org/"]:after {
content: '';
margin: 0;
}
I think this will help you resolve the issue simply,
Add an offsite link icon after external links with CSS
Quote from the article:
This will make all links styled with an external linked icon in the end,
a[href^="http://"] {
background: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png) center right no-repeat;
padding-right: 13px;
}
And following code will prevent the external icon style on specific urls:
a[href^="http://www.stackoverflow.com"] {
background: none;
padding-right: 0;
}
OK, this is pretty similar to the other answers, but it's short and sweet and works for both http and https. Of course, you will have problems if you use double slashes in your internal URLs, but you shouldn't be doing that anyway (see these questions).
a:not([href*="//"]) {
/* CSS for internal links */
}
a[href*="//"] {
/*CSS for external links */
}
I wish I'd known about this before I tagged all my links with class="internal" and class="external".
So to add an image, as already stated:
a[href*="//"]::after {
content: url(/* image URL here */);
}
I have a weird Chrome problem. I'm using the following code and style to show <div class="hoverslave"> on hovering:
<div class="hoverhome">
<div class="...">...</div>
<div class="hoverslave">...</div>
</div>
.
.hoverhome:hover .hoverslave {
display: inline;
}
.hoverhome .hoverslave {
display: none;
}
.editelement {
/*display: inline-block;*/
margin-left: 10px;
}
It works only in this configuration. If I comment out or even delete the .editelement block (a class "editelement" doesn't even exist in the DOM...) .hoverslave will be shown all the time:
/*.editelement {
*display: inline-block;*
margin-left: 10px;
}*/
Same if I try to add the margin-left: 10px; anywhere else (div, .hoverslave, ...). How can I get a margin of 10 px on the left side of .hoverslave?
Everything also works as expected when I run the application locally, but not when it's deployed on Google App Engine. The W3C CSS Validator doesn't show any errors.
Simply add the margin to the CSS declaration which shows .hoverslave.
Example here.
Okay, I found the bug: I was using GWT's SafeHtmlBuilder in the wrong way. The opening and closing tags were not inside one SafeHtml object.
Wrong:
sb.appendHtmlConstant("<div class=\"hoverhome\">");
sb.appendHtmlConstant("...");
sb.appendHtmlConstant("</div>");
The correct way is explained on the GWT website. My solution now uses Templates:
sb.append(TEMPLATE.hoverhome(title, actions));
I also made the mistake to load the CSS file via a tag in the host HTML page. This method is now deprecated. Using inline elements everything is working. More details on the GWT page.