I've got this html element :
<span class="item-menu-notif non-lue" onclick="dosomething(2150)">
TEXT
</span>
Here's CSS classes :
.item-menu-notif{
display: block;
cursor: pointer;
padding: 0 0.4em 0 0.4em;
}
span.item-menu-notif:hover{
background: #aaaaaa;
}
span.item-menu-notif .non-lue{
font-weight: bold;
}
My problem is that the non-lue class is not use. In firebug I can see that the class doesn't appear on my span element.
I can't understand why. I tried with and without span selector on my CSS. It's the same result.
Remove the space between the selectors:
span.item-menu-notif.non-lue
You only use space if you want to target elements who are descendants. But since you want to target the element with both classes, you have to remove that space between them.
It's because of the
span.item-menu-notif .non-lue{
font-weight: bold;
}
With this you tell to the browser, "find for me an element with the class
'.non-lue' that is into a span element with the class name 'item-menu-notif'".
For specifying a more explicit rule for an element, like in your case, where you want a span element that is an 'item-menu-notif' and a 'non-lue' you should provide the class names without whitespace between them (with a whitespace character between selectors it is assumed that the right most is a descentant of the left side selector).
Please check out these links, hope they will help you:
The first one is about selectors and the second & third are about specificity rules.
1) http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
2) https://css-tricks.com/specifics-on-css-specificity/
3) https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
And of course the right answer is:
span.item-menu-notif.non-lue{
font-weight: bold;
}
This selector says that an element with a class of .non-lue inside your span will be styled, instead of the span element.
span.item-menu-notif .non-lue{ font-weight: bold; }
Remove the space and it will go from saying .non-lue inside the span to span with .item-menu-notif AND .non-lue.
span.item-menu-notif.non-lue{ font-weight: bold; }
You should do this
span.item-menu-notif.non-lue{
font-weight: bold;
}
Related
I have a popup that will be added to websites via javascript. I have no clue on what sort of styles will be applied on these websites.
Example website has the current styles added:
h3 {
color: blue;
border: 5px solid red;
font-size: 24px;
}
My Popup which is added to the body of the website has:
PopupText = styled.h3`
font-size: 16px;
color: black;
`;
This means that font size and color are what i've declared but the border will be added regardless, is there any way to remove the added extra css properties, or to protect from additional styling added by the website?
To sum up, I want my popup to look the same, no matter where it is added. As of right now, when i add it to a website it changes depending on what styling is on the website
You can use all attribute like this :
.class {
all: unset;
}
Check it here
I think you need use iframe tag for wrap
You can use the :not() selector to achieve that: If your popup element has a class (which is probably the case) you can modify your regular css rule for h3 as follows:
*:not(.yourpopupclass) h3 {
color: blue;
border: 5px solid red;
font-size: 24px;
}
This will affect any h3 element that is a child element of anything (i.e. also of body), except if it's a child of an element that has class .yourpopupclass (i.e. is inside your popup).
The same woud be possible with an ID if the popup has no class, but an ID.
Is there a way to only target the direct text within a <h1>-Tag?
Here is an example on what I want to do:
<h1>I want to select this text with a css selector <small>but not this text</small></h1>
This does not seem to work:
h1:not(small)
Is it even possible?
h1:not(small)
Your selector h1:not(small) doesn't work because it says this:
Target all h1 elements that are not small elements.
It's that same as using the h1 selector by itself.
h1 :not(small)
You would have been closer with h1 :not(small), which says:
Target all descendants of an h1 except small elements.
Boom! Exactly what you want.
Except that text contained directly inside an element (i.e, text with no tags around it) becomes an anonymous element. And anonymous elements are not selectable by CSS.
h1 :not(small) {
color: orange;
}
<h1>This text is contained directly inside the container. It is not selectable by CSS. It is an anonymous element. <small>This text is inside a small element</small></h1>
<hr>
<h1><span>This text is contained in a span. It is selectable by CSS</span> <small>This text is inside a small element</small></h1>
CSS Parent Selector
For the small element to be excluded it would have to identify itself as a child of the h1.
But there is no parent selector in CSS.
Solution: Two selectors
You need two selectors to make this work:
The first sets the style on the parent.
The second overrides the first on the child.
h1 {
color: orange;
}
h1 > small {
color: black;
}
<h1>I want to select this text with a css selector <small>but not this text</small></h1>
More Information
Targeting text nodes with CSS
Is it possible to style anonymous flex items explicitly?
Is it possible to select elements not preceded by text?
This is the closest it gets to retaining the style without any css that has been implemented by the parent div. This feature hasn't been fully integrated in all browsers, but it should work for some. Hope, it helps.
Browser support -
What's being done here?
The small tag is retaining its original CSS without being affected by the other styles. You can apply this on any of the child elements whose style you want to preserve.
small {
all: initial;
* {
all: unset;
}
}
h1 {
color: #ff0000;
}
<h1>I want to select this tex with a css selector <small>but not this text</small></h1>
Apply styles to h1 however you want, then, revert those changes in small, for example, if you only want to change the color you would use this code;
h1 { color: red; }
h1 small { color: initial; }
Or, if you have multiple style changes;
h1 {
color: red;
font-weight: italic;
text-transform: uppercase;
}
h1 small {
color: initial;
font-weight: initial;
text-transform: initial;
}
Please note that the initial CSS value can be used on every browser, except for IE and Opera Mini. View this page for more information
currently i have
<div class="rightBoxesTop">
<h3>My Pages</h3>
<h3 style="line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;">
show in-active <input id="show-in" type="checkbox"></h3>
</div>
I would like to move the inline style to the css. Is this only way to the second H3 an id or is there a way to reference the class rightBoxesTop and use some thing like second something? Also if you could tell me what this kind of styling is so i could search for keywords on how to use it correctly
Thanks
You can try this to style 2nd, 3rd and other following h3 tags:
.rightBoxesTop h3 + h3
{
line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;
}
Also you can use CSS3 selector to style only the second h3:
.rightBoxesTop h3:nth-child(2)
{
line-height: 8px; width: 80px; font-size: 80%; margin-top: 7px;
}
if you are able to remove the inline styles, then you can also add a class for it.
This gives you the option to style it easily by its class in the CSS.
UPDATE: Because you must remove the inline styles, you can not override them in your CSS.
You can use the selector div.rightBoxesTop h3 + h3. It will style only h3 elements that are preceded by another h3 element. This does mean, that if you got more of them, they will all be styled, except the first one.
But in this case, I would consider adding a class (rather than an id) to the second h3.
You can use .rightBoxesTop h3+h3{} as people suggested, but be careful, if you add another h3 the last 2 h3's will have that styling, or if you create another div inside .rightBoxesTop that has more than h3's they will get the styling as well, so a precise way would be:
.rightBoxesTop>h3:first-child+h3{
//your css here
}
Which would mean "The first children's( ">" means direct child, so if there are more nested levels they won't count) next h3, will get the css"
Currently, I'm doing something like this:
<h2><div class='q'>Q:</div> Does alfredo sauce contain soy?</h2>
and then styling it in my CSS file, like so:
.q {
padding-bottom: 15px;
display: inline;
font-size: 35px;
font-weight: 700;
color: #65A6D1;
}
While this displays fine in my browser, when running the page through http://validator.w3.org, it complains: "Element div not allowed as child of element h2 in this context. (Suppressing further errors from this subtree.)"
How would I style this piece of text in valid HTML/CSS?
You can use a span
<h2><span class='q'>Q:</span> Does alfredo sauce contain soy?</h2>
also remove display: inline from the class
.q {
padding-bottom: 15px;
/*display: inline;*/
font-size: 35px;
font-weight: 700;
color: #65A6D1;
}
Use a span instead of a div inside the h2.
Use the <span> tag instead of <div>. <span> is an inline element, while <div> is a block element.
A div creates a new block element. These are forbidden in h2 and many other elements. You can create an inline element with span.
<h2><span class='q'>Q:</span> Does alfredo sauce contain soy?</h2>
Of course, you need to change the stylesheet accordingly.
You can do this:
<h2 id="q"><span>Q</span>Does alfredo sauce contain soy?</h2>
h2#q span {
padding-bottom: 15px;
display: inline;
font-size: 35px;
font-weight: 700;
color: #65A6D1;
}
div and h2 are both block elements. Use span instead of div.
For example:
<h2><span class="q">Q:</span> Blammy blammo soy?</h2>
additional note: [Non-normative description] Some elements don't like to contain block elements. The header (h1, h2, ...) elements don't like to contain block elements. "Don't like": the spec says "should not" I believe.
I've tried this:
#ambrosia h3
{
font: 12px/18px Arial,Verdana,sans-serif;
font-color: red;
font-weight: bold;
}
and this:
#ambrosia h3
{
font: 12px/18px Arial,Verdana,sans-serif;
color: red;
font-weight: bold;
}
but I still end up with a gray font on my H3 text.
Why?
Either you have another color set for the id #ambrosia and that is taking precedence over the generic selector, or you have another tag inside the h3 which has a color assigned to it.
Or, in your html you have the #ambrosia applied to the h3 tag, but in your css, you have specified an h3 element which is inside an #ambrosia element. If you are wanting to use <h3 id="ambrosia">, your css should be
h3#ambrosia { color: red; }
You likely have other CSS that has a more specific selector that's giving your <h3> that font color, identifying that selector and/or posting your markup would help us provide a more specific selector that would override the font color.
You should use Chrome's "Inspect Element" option.
Right click on the line and choose Inspect Element and it will show you the path of the CSS evolution of your element.
the color: red; syntax is correct. however it is possible that you have some other styles in your css file that are conflicting.
you might try using the "firebug" firefox plugin. it will allow you to select the element and see exactly which style is applied to the element and if your class is being overridden