I did just want to answer a question and I fall on something I dont understand!
Why the result is not the same if I use inline CSS or CSS in a file like the color in this case!
The code is the same but the 1st paragraph is green and the 2nd red!
I really dont understand why?
Thank you
<head>
<style>
p:first-child{
color: red;
}
p:not(a){
color: green;
}
</style>
</head>
<body>
<p>This a paragraph.</p>
</body>
p:first-child{
color: red;
}
p:not(a){
color: green;
}
<body>
<p>This a paragraph.</p>
</body>
If you copy your first snippet into a file and open it in a browser the paragraph is indeed red as in the second example.
But for some strange reason* if you run the first snippet in stackoverflow the style element is moved into the body element before the p element (just introspect with firebug). Now p is not the first child and therefore the red-color rule does not apply.
*EDIT: or not that strange (see comment by Turnip) since the body tag is stripped from the script.
p:first-child will only render on the first child if it is a p tag. For whatever reason, the StackOverflow snippet is rendering the code as:
<head>
<style>
</style>
<style type="text/css"></style></head>
<body>
<style>
p:first-child{
color: red;
}
p:not(a){
color: green;
}
</style>
<p>This a paragraph.</p>
</body>
</html>
The first child is the <style> tag, which got moved into the body. Because of this, there is no p:first-child and so the color red never renders, this leaves green as the only style applied to the <p> tag.
While there is an exception for the :not() pseudoclass in the CSS Specificity Rules that determine when specific CSS styles are applied to certain elements, the real issue here is a matter of invalid markup.
The first example that you provided is actually invalid as <style> blocks must be declared within the <head> element according to the spec, and you'll notice when this is corrected the results should be the same:
Doh! Or it's just a matter of Stack Overflow's editor stripping out the <body> tags within the code examples per the comment from Turnip.
Related
I am creating a graphic user interface with a drop down menu filled with css styles (bold, italics, changing color of words, etc). The problem I am running into is when I apply these styles, it applies to the entire paragraph and not the individual words. How can I code it to recognized what is highlighted and applying the formatting specifically to that.
I would like to apply span to just the highlighted portion. How?
Ex:
<style>
.red {
color: red;
}
</style>
<body>
<p>This <span class="red">is a</span> test.</p>
</body>
This is the only way I know of to apply span but would like to learn how to have it apply to what the user highlighted. Is there code that detects what user highlighted?
Edit: The goal is to highlight, apply a css style to what is highlighted, remove highlight and style is still there.
I think you are looking for ::selection
https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
::selection {
background: cyan;
}
Some text
If you want to highlight only the span.red, use the ::selection pseudo-element like so:
span.red::selection { background-color: red }
<p>Hello, <span class="red">RED HIGHLIGHT</span>!</p>
Try this out. It should work for you. We have an a span with an id bg-span on which we apply our styling.
<!DOCTYPE html>
<html>
<head>
<style>
#bg-span {
background-color: #f18973;
}
</style>
</head>
<body>
<p>Set a <span id="bg-span">background</span> color for only a part of a text.</p>
</body>
</html>
I searched and found one solution to get selected/highlighted text by JavaScript and hide it.
You can use this solution and change code to wrap selected text with span and add selected class to that span.
JQuery selector for highlighted text
Good Luck
Is it possible to style a custom element with an external css file that is linked on the index page but not in an element itself. I haven't found any documentation about using a css file not within the element itself.
I have something like this example.
<head>
/* Use of only 1 css for all elements */
<link href="css/custom.less" rel="stylesheet/less" type="text/css">
</head>
<body>
<my-element></my-element>
<my-other></my-other>
<my-other2></my-other>
</body>
The problem is that the styling has been done in Firefox but not in Chrome.
So I know it's not a problem with the css.
Css looks something like this.
my-element {
header {
background-color: #article-color;
text-align: center;
margin-bottom: 25px;
h1 {
color: #ffffff;
}
}
}
/* Styling of other elements */
I know I can use css within the polymer element itself, but I don't want to do this. I have multiple elements and I want to style all of them within one css file that I link in the index file like in the example.
It is possible to style custom elements from the index file using a ::shadow or the /deep/ pseudo-element.
Example:
<head>
<style>
// This is thinking there is a 'p' in 'my-element'
my-element::shadow p{
color: red
}
</style>
</head>
<body>
<my-element></my-element>
</body>
But please know this before you use it,according to the Polymer docs this method is not very efficient in execution, meaning it could potentially slow the rendering of the page if used a lot.
More info about ::shadow and Styling Custom elements at:
https://www.polymer-project.org/0.5/articles/styling-elements.html
https://www.polymer-project.org/0.5/docs/polymer/styling.html
I encountered a peculiar CSS formatting problem when I changed a <div id="header"> block to HTML5's <header> block. Basically, I want links within the <header> block to be of a certain colour and to not get any decoration.
The relevant HTML and CSS codes look as follows:
<!-- HTML5 code -->
<header>
<h1>
Link text
</h1>
</header>
/* CSS code */
header a {
color: black;
text-decoration: none;
}
The output I see (using Firefox 20.0 with Ubuntu 12.04) is as if the CSS code fragment above does not exist.
Adding something like class="hdr" to the anchor block and changing the CSS rule to a.hdr works. Changing back to <div id="header"> and #header a also works. Still, I don't see why just using <header> and a corresponding rule fails, and it strikes me as the "correct" approach.
An initial search for a solution led me, among other links, to this link (I had the <h1> block nested within the <a> block, initially), but using a <div> wrapper didn't work either.
Try being more specific.
<header class="main-header">
<h1>Link Text</h1>
</header> <!-- .main-header -->
.main-header a {
color: green;
text-decoration: none;
}
using
header h1 a {}
as your selector should fix your specificity issue
Else if your style is getting overridden once it's become visited (by the a:visited selector) you can write a style of equal specificity but it'll override the other rule because it's later in the cascade
header a:visited {}
Just make it come later in the stylesheet
BTW, sorry had to post an answer as I can't comment yet
Is there any reason why CSS declaration won't display in the browser?
Here's a sample of my CSS file:
.adv {
color:#47463D;
}
.earnings {
color:#B4FF00;
}
When I do <font class=adv>hello</font>, it works a treat.
When I do <font class=earnings>hello</font>, the color specified for .earnings doesn't display in the browser.
The page is linked to the correct CSS file.
Chances are somewhere on your page you have a style whose specificity supersedes the .earnings (See this page). CSS is applied by a weight scale, so anything with a higher weight (calculated specificity) takes priority over what you think may be applied.
Best thing to do is use something like Firebug (firefox extension) or Chrome's inspector to see what style really is applied.
Example (And, by the way, CSS order is irrelevant)
<style>
/* what you think is applied */
.foo { color: red; }
/* What is being applied due to specificity */
#bar .foo { color: green; }
</style>
<span class="foo">.foo</span> <!-- color is red -->
<div id="bar">
<span class="foo">#bar .foo</span> <!-- color is actually green -->
</div>
Make sure to surround your parameter values with quotes. You also need to make sure your tags match up
<a class="adv">hello</a>
<font class="earnings">hello</font>
Finally, if you have multiple css parameters in .earnings you need to put a semi-colon after each one.
The last semicolon in a CSS declaration is optional, so that's not your problem.
Most likely you have other styling applied that has a higher precedence. The CSS precedence rules can be a bit weird; the most common stumbling point is that a highly specific declaration takes precedence over subsequent declarations that are less specific
Example from HTMLdog.com:
div p { color: red; }
p { color: blue; }
Using that stylesheet, any p elements within a div will be colored red, not blue.
What I really suggest you do is get a decent developer tools plugin for your browser (e.g. Firebug on Firefox) and look through the style tracing; it will tell you what is being overridden, and by what.
Add a semi-colon after your color line.
.adv {
color:#47463D;
}
.earnings {
color:#B4FF00;
}
Also, you should be using double quotes around your classes in html, along with matching closing tags:
<font class="earnings">hello</font>
Your second font tag is getting parsed as inside your first one, and not showing up.
I'm not sure if you intend to close a font tag with an a tag, but the following code works just fine:
<html>
<head>
<title>CSS Color Example</title>
<style type="text/css">
.adv {color:red;}
.earnings {color:red;}
</style>
</head>
<body>
<div class=adv>hello</div>
<div class=earnings>hello</div>
</body>
</html>
With firebug, use the element inspector (because I do not remember that the semicolons and the quotes was obligatory in the class attribute) and try to see what other selectors are involving whith the class "earnings".
Can you put a jsfiddle example of your problem?
I know that IE7 doesn't support the value inherit for any CSS properties except direction and visibility. When a browser doesn't support a value, it should simply not apply the given declaration (that particular line). Does anyone know why IE7 doesn't use the first ul a color declaration, instead choosing to use the plain a color declaration? Is it just ignoring the entire ul a rule?
To be clear: in most browsers the first link is red and the second link is blue. In IE7 the first link is red, but so is the second, even though I have at least one declaration it should understand in the ul a rule.
<!DOCTYPE html>
<html>
<head>
<title>Anchor Inherit Test</title>
<style type="text/css">
body {
color: #369;
}
a {
color: #f00;
}
ul a {
color: #369;
color: inherit; /* this should be ignored by IE7, right? */
}
</style>
</head>
<body>
<p>This is testing a red link in a paragraph.</p>
<ul>
<li>here is a link that should not be red</li>
</ul>
</body>
</html>
color isn't the only property which doesn't ignore unsupported and invalid values.
For example background-color and display are affected too.
Does anyone know why IE7 doesn't use
the first ul a color declaration,
instead choosing to use the plain a
color declaration? Is it just ignoring
the entire ul a rule?
Any unrecognized value (even none) will trigger the bug.
Apparently LTE IE7 discards all the color declarations in the same rule (even !important ones) if the last one contains an erroneous value.
And this jsbin confirms that it effectively overrides previous declarations in the same rule too.
As an alternative you could use a dynamic property.