This question already has answers here:
Why can't I use a heading tag inside a p tag and style it with CSS?
(5 answers)
What's the difference between CSS classes .foo.bar (without space) and .foo .bar (with space)
(6 answers)
Closed last year.
I want to override the css of <h1> and <h2> using selector (specific using selector only) but it's not working. It's getting only applied to one class only <h1> color changes to green not <h2>.
Please help can someone tell me where I am wrong. Please help!
.temp {
color: blue;
}
.temp2 {
color: red;
}
p .temp,.temp2{
color: green !important;
}
<p>
hi there this is a test page
<h1 class="temp">heading inside p tag</h1>
<h2 class="temp2">2nd heading inside p tag</h2>
</p>
Try this:
.temp {
color: blue;
}
.temp2 {
color: red;
}
div .temp,
div .temp2{
color: green !important;
}
<div>
hi there this is a test page
<h1 class="temp">heading inside p tag</h1>
<h2 class="temp2">2nd heading inside p tag</h2>
</div>
.temp {
color: blue;
}
.temp2 {
color: red;
}
span .temp, .temp2{
color: green !important;
}
<span>
hi there this is a test page
<h1 class="temp">heading inside p tag</h1>
<h2 class="temp2">2nd heading inside p tag</h2>
</span>
Answer:
putting h1/h2 content inside p is invalid (You might have noticed in Stack overflow's snippet editor)
Imagine having a huge heading inside small paragraph
so change to span/div/etc (in html+css)
You have missed to mention the paragraph element for temp2
.temp {
color: blue;
}
.temp2 {
color: red;
}
p .temp,p .temp2{
color: green !important;
}
<p>
hi there this is a test page
<h1 class="temp">heading inside p tag</h1>
<h2 class="temp2">2nd heading inside p tag</h2>
</p>
Related
This question already has answers here:
What is use of 'initial' value in CSS?
(3 answers)
What's default HTML/CSS link color?
(12 answers)
Closed 2 years ago.
I have seen an example in MDN lesson about inheritance, and I can't understand why the third link's color is black? it should be blue, like a usual link, because the initial value supposes to be the default value!
Thank you for helping me.
Here is the code:
body {
color: green;
}
.my-class-1 a {
color: inherit;
}
.my-class-2 a {
color: initial;
}
.my-class-3 a {
color: unset;
}
<ul>
<li>Default link color</li>
<li class="my-class-1">Inherit the link color</li>
<li class="my-class-2">Reset the link color</li>
<li class="my-class-3">Unset the link color</li>
</ul>
it is because the initial color of attrubutes are black, same with
here is an example from w3schools where they set the color of the division to red, but using initial resets h1 to the base color of attributes.
div {
color: red;
}
#initialH1Color {
color: initial;
}
<div>
<h1 id="initialH1Color">this will be initial color</h1>
<h1>this will be div color: red</h1>
</div>
here is an example of inherit
div{
background: #333;
border: 5px solid orange;
color: lime;
}
.initial {
color: initial;
}
.inherit {
color: inherit;
}
<div>
<h1 class="initial">class initial</h1>
<h1 class="inherit">class inherit</h1>
<h1>no class</h1>
</div>
as you can see here class inherit and no class are the same color, that is because inherit is the automatic/normal/basic/initial value for color
The inherit keyword specifies that a property should inherit its value
from its parent element.
UPDATE
the reason for the a attribute beeing blue by default (which it is not, it is black). is because it is a link. take a look at the example
<a>no href tag = black</a>
has href tag = blue
<a href="#" >same with this one</a>
I am building a web site that is basically made out of sections + rows + columns and to each element you can apply a color scheme.
If the color scheme is applied to the section, all the rows and columns within it will have the same color scheme, however, sometimes I want to add a color scheme to a single column to differentiate it, but in some cases the parent section color scheme css is placed AFTER the color scheme css for the column (in the css file), and then it applies the colors for the section instead of the columns.
Here is the code (simplified for the sake of example).
I could get around it in specific cases, using !important, but I am looking for a global solution.
CSS:
/* Grey */
.color-scheme-grey button {
background-color: #666666;
color: #ffffff;
}
/* Blue */
.color-scheme-blue button {
background-color: blue;
color: #ffffff;
}
HTML:
<div class="section color-scheme-blue">
<div class="row">
<div class="column color-scheme-grey">
<button>I am blue, but I wish I was grey!</button>
</div>
</div>
</div>
Thanks!
This is expected behaviour as a direct result of Cascade Precedence.
If two rules carry the same weight or specificity the rule declared last always wins and over-qualifies the other.
Use more Specificity
Consider declaring another element or class selector in the range of the contextual selectors already specified.
Example:
Added element selector (div) for more specificity...
div.color-scheme-grey button { ... }
Added a class selector (.section) for more specificity...
.section .color-scheme-grey button { ... }
Code Snippet Demonstrations:
1. Additional Class Selector:
/* Grey */
.section .color-scheme-grey button {
background-color: #666666;
color: #ffffff;
}
/* Blue */
.color-scheme-blue button {
background-color: blue;
color: #ffffff;
}
<div class="section color-scheme-blue">
<div class="row">
<div class="column color-scheme-grey">
<button>I am blue, but I wish I was grey!</button>
</div>
</div>
</div>
2. Additional Element Selector:
/* Grey */
div.color-scheme-grey button {
background-color: #666666;
color: #ffffff;
}
/* Blue */
.color-scheme-blue button {
background-color: blue;
color: #ffffff;
}
<div class="section color-scheme-blue">
<div class="row">
<div class="column color-scheme-grey">
<button>I am blue, but I wish I was grey!</button>
</div>
</div>
</div>
For Further Information regarding CSS Specificity:
Specificity - CSS | MDN
Specifics on CSS Specificity | CSS Tricks
Apply your styles from the parent like below.
.section .color-scheme-grey button {
background-color: #666666;
color: #ffffff;
}
DEMO
You could increase the specificity of the rules to counteract the order of the files:
/* Grey */
.color-scheme-grey button {
background-color: #666666;
color: #ffffff;
}
/* Blue */
.color-scheme-blue button {
background-color: blue;
color: #ffffff;
}
.color-scheme-blue .color-scheme-grey button {
background-color: #666666;
}
You need to be careful with this, though, as it can very quickly get out of hand with all the combinations!
Better would be to organise a set of formatting that applies to rows/sections and, separately, columns, and organise them appropriately in a file (sections first).
I'm looking for a neat way to solve the given problem:
Let's say we have an article, and I want to style every h1, h2 in unless they are located in the <div ="example">
<article class="article">
<h1>Direct Child 1</h1>
<h2>Direct Child 2</h2>
<div class="example">
<h1>Example Child 1</h1>
<h2>Example Child 2</h2>
</div>
<div class="other-div">
<h1>Indirect Child 1</h1>
<h2>Indirect Child 2</h2>
</div>
</div>
Now in pure CSS the solution is simple:
.article > h1,
.article *:not(.example) h1 {
color: red;
}
.article > h2,
.article *:not(.example) h2 {
color: blue;
}
All h1s are red, and h2s are blue, unless they're within <div class=example>" - Pen
In LESS, however, I can't find a clean way to do this.
.article {
& :not(.example) {
h1 {
color: red;
}
h2 {
color: blue;
}
}
}
I'm looking for a way to add <div class=article>" direct child h1s and h2 into the mix while keeping it DRY.
I guess the main show-stopper for your attempt is the limitation of Less requiring a selector combinator (like >) to always go before a selector element (so neither & > nor > alone can work).
There's workaround however:
.article {
#-: ~'>';
#{-}, *:not(.example) {
h1 {color: red}
h2 {color: blue}
}
}
I have the following string and I want to ignore just strong tag from the string using css selector:
<p><strong>Local:</strong><br>
-Brasília/DF </p>
I tried the following syntax but it doesn't work.
p:not(strong)
Where am I wrong?
A pseudo-class, attached to an element p:not(strong), selects from those elements to which it is 'attached' (here the p); and a <p> element is always not a <strong> element; therefore this selector will always match every <p> element.
You seem to be trying to style the parent <p> element based on its child <strong> element which cannot work, as CSS has no parent-selector (see: "Is there a CSS parent selector?")
You could, instead, add a class (or other attribute) to the <p> element, and use that in the selector:
<p class="hasStrongDescendant"><strong><strong>Local:</strong><br>
-Brasília/DF </p>
And style with:
p:not(.hasStrongDescendant) {
/* CSS here */
}
p:not(.hasStrongDescendant) {
color: orange;
}
<p>A paragraph with no child elements</p>
<p class="hasStrongDescendant"><strong>Local:</strong>
<br>-Brasília/DF</p>
Or, using a data-* attribute:
<p data-hasChild="strong"><strong>Local:</strong><br>
-Brasília/DF </p>
And style with:
p:not([data-hasChild="strong"]) {
/* CSS here */
}
p:not([data-hasChild="strong"]) {
color: #f90;
}
<p>A paragraph with no child elements</p>
<p data-hasChild="strong"><strong>Local:</strong>
<br>-Brasília/DF</p>
Also, if you wrapped the contents of the <p>, following the <strong>, inside their own element you could style the descendants of the paragraph using the negation selector:
<p>A paragraph with no child elements</p>
<p><strong>Local:</strong>
<br><span>-Brasília/DF</span>
</p>
Styling with:
p :not(strong) {
/* note the space between the
'p' and the ':not()' */
color: #f90;
}
p :not(strong) {
color: #f90;
}
<p>A paragraph with no child elements</p>
<p><strong>Local:</strong>
<br><span>-Brasília/DF</span>
</p>
Two further approaches, assuming that you want to style the text of the child outside of the <strong> element is (the simplest):
/* define a colour for the <p>
elements: */
p {
color: #f90;
}
/* define a colour for the <strong>
elements within <p> elements: */
p strong {
color: #000;
}
p {
color: #f90;
}
p strong {
color: #000;
}
<p>A paragraph with no child elements</p>
<p><strong>Local:</strong>
<br>-Brasília/DF</p>
And a slightly more complex version, using CSS generated content:
p {
color: #f90;
}
p[data-label]::before {
content: attr(data-label) ': ';
color: #000;
display: block;
font-weight: bold;
}
<p data-label="Local">-Brasília/DF</p>
References:
CSS negation pseudo-class (:not()).
That is not how :not() pseudo-class works. It matches an element that is not represented by the argument.
So in this case to select text of p but not the strong tag you can wrap other part of text in span and then select all children of p but not strong like this
p :not(strong) {
color: blue;
}
<p><strong>Local:</strong><br>
<span>-Brasília/DF </span></p>
Other option is to simply select text of p and then overwrite strong tag with default style.
p {
color: blue;
}
p strong {
color: black;
}
<p><strong>Local:</strong>
<br>-Brasília/DF</p>
Anything but the strong tag will use CSS. Like:
.just_this :not(strong){
color:blue;
}
<p class="just_this">
<strong>Local:</strong>
<br /><span>-Brasília/DF</span>
</p>
Alternative(just use the child-combinator '>'):
.just_this{
color:blue;
}
.just_this>strong{
color:black;
}
<p class="just_this">
<strong>Local:</strong>
<br />-Brasília/DF
</p>
The reason I ask, is that I am trying to have sections, that I can show and hide with CSS, in a plain Markdown rendered document. The rendered output might be some thing like this:
<h2>Hello</h2>
<p>content</p>
<p>more content</p>
<h2>Hello</h2>
<p>content not in a section</p>
<p>and neither is this</p>
<h2>World</h2>
<p>even more content</p>
<p>...whatever</p>
<h3>Title</h3>
<p>some stuff</p>
<h2>World</h2>
<p>...another paragraph</p>
<h2>Again</h2>
<p>more stuff</p>
<p>...and more</p>
<h2>Again</h2>
And I'd like to be be able to hide/show everything between, and including, the section 1 <h2> tags.
I was thinking of something along the lines of:
h2 ~ p {
...
}
But this will obviously not stop at the next h2 tag. I realise this is probably not possible, but I thought I'd ask just in case I missed anything.
Edit Just to clarify, there could be many h2 elements, and other h? elements as well e.g. h3
Edit I've managed to get something working with the following CSS
h2:nth-of-type(2n+1) {
color: blue;
}
h2:nth-of-type(2n) {
color: red;
}
h2:nth-of-type(1) ~ *:not(h2) {
color: purple;
}
h2:nth-of-type(2) ~ *:not(h2) {
color: black;
}
h2:nth-of-type(3) ~ *:not(h2) {
color: purple;
}
h2:nth-of-type(4) ~ *:not(h2) {
color: black;
}
h2:nth-of-type(5) ~ *:not(h2) {
color: purple;
}
h2:nth-of-type(6) ~ *:not(h2) {
color: black;
}
h2:nth-of-type(7) ~ *:not(h2) {
color: purple;
}
h2:nth-of-type(8) ~ *:not(h2) {
color: black;
}
h3 {
color: black;
}
It's gludgy, but then what I'm trying to do with the markdown HTML is fairly gludgy. The colours are standins for the show/hide stuff, just showing that I can target them. See the jsFiddle
Assuming that you can encapsulate the entire generated HTML into a single element (for instance body, or even a div):
<body>
<h2>Hello</h2>
<p>content</p>
<p>more content</p>
<h2>World</h2>
<p>even more content</p>
<p>...whatever</p>
</body>
In your CSS, you can target the h2 elements by using :nth-of-type():
h2:nth-of-type(1) {
color: red;
}
h2:nth-of-type(2) {
color: blue;
}
h2:nth-of-type(1) ~ p {
color: purple;
}
h2:nth-of-type(2) ~ p {
color: orange;
}
See jsFiddle.
Do realize though that this is a rather ugly solution, not sure if it works properly in all browsers that support nth-of-type, and it is source-order dependent.
if you use selector as :not() , it might be a way
http://codepen.io/anon/full/mxasv
for older browser use polyfill/jQuery
to convince you, some links ?
Polyfill for css :target, not(), and [tilde] sibling selectors?
http://api.jquery.com/not-selector/
http://api.jquery.com/not/
Quiet soon , you won't need polyfill/jQuery, CSS2.1 is 15 years old ?