I am hacking away at a wordpress theme and do not wish to make changes to the main stylesheet, style.css, so all changes need to go into style-custom.css
The stylesheet applies a font-family style to a certain class, but I want that class to defer to the globally defined font.
So this is how the inheritance is working:
style.css:383
div#main-superfish-wrapper ul {
font-family: Georgia,"Times New Roman",Times,serif;
}
style.css:10
body {
font-family: Droid Sans;
}
in style-custom.css, I simply wish to cancel out the style defined at style.css:383 and revert to the original definition at style.css:10. I don't wish to redefine the font-family.
Is this possible in straight css?
Yes, just use the inherit keyword:
div#main-superfish-wrapper ul {
font-family: inherit;
}
Related
A lot of sites use the ::before selector on an element to load icons via a client-downloaded font file, e.g.
div {
font: 14px/1 FontAwesome;
}
div::before {
content: "\f1c8";
}
Unfortunately the following rule also applies to the element's ::before pseudo-element, which breaks the icon display:
div {
font-family: sans-serif !important;
}
It's not possible to :not(::before) (source), so how would you go about targeting an element, but not it's ::before?
This worked decently, but it misses the text (if any) inside the element:
div:not([class*="fa-"]) {
font-family: sans-serif !important;
}
It may not even be possible. No JavaScript, please.
It's not possible without then again overwriting the before and after again
div {
font-family: sans-serif;
}
div::before,
div::after {
font-family: serif;
}
Or you could just use the icon in another element entirely.
<span class="fa-something"></span>
<span>Text here</span>
And a s a sidenote :)
Please use textelements for text, not divs (and span is also not a text element, it simply is an inline element without any semantic information)
With #Termani's help above, this is how I solved the problem of injecting my preferred font into websites while doing minimal damage to most site's icons loaded via webfont files:
::before, ::after {
font-family: FontAwesome, "Font Awesome", "Font Awesome 5 Pro",
"Font Awesome 5 Free", "Material Icons", "Material-Design-Iconic-Font",
Flaticon, "CBSi Fantasy icomoon", CBSi_Fantasy_icomoon, icon-moon,
icomoon, ui-icons, icons, NewYorkIcons, sans-serif !important;
}
Without doubt there are other font-family names that developers use, so the list will grow as I stumble upon them.
I'll update this answer if I find a better solution.
I am in a conundrum: the stylelint rule "selector-max-universal": 0 is required and, at the same time, I need to provide a default font family to text elements within a certain class.
Therefore I am not able to use this:
* { font-family: Somefont; }
And, at the same time, code review requested me not to use these kind of selectors (SCSS mixin):
#mixin setGlobalFontFamily($family: Somefont) {
button,
div,
h1,
h2,
h3,
h4,
h5,
h6,
label,
p {
font-family: $family, sans-serif;
}
}
// fonts are specific to certain classes
.theme-a {
#include setGlobalFontFamily;
}
.theme-b {
#include setGlobalFontFamily(Roboto);
}
//.theme-...
Theme classes are conditionally applied through JS to a container element, e.g.:
<body>
<section class="theme-b">
</section>
</body>
Additionnaly, these fonts families should be set globally in one file and only once per each theme class, guaranteeing that other theme font families are not shown...
Can anyone see a way to workaround this problem?
If I understood correctly you can just set the font families directly to .theme-a and .theme-b e.g.:
.theme-a {
font-family: 'Some Font', sans-serif;
}
.theme-b {
font-family: 'Roboto', sans-serif;
}
The children of those elements should inherit the fonts automatically if something doesn't overwrite them. There's no need of setting each element manually.
So have my main style sheet that sets all the styles for my site. But I have a div that opens as menu. I need it to have it's own style and I can't have it or it's decedents inherent any styles from the main style sheet. But after I reset the style I'm then styling the div like it's a whole new element. I found the all: initial; rest the elements. and #we_gallery_edit_window > * sort of works. But when I try to declare the new styles some of the new styles won't take because of precedence. here is my code so far:
h1
{
color: #000000;
background-color: #FFFFFF;
}
#my_div > * /*Clear all previous CSS for #mydiv only */
{
all: initial;
}
.my_div_child h1
{
color: #F0F0F0;
}
<h1>Hello</h1> //Should be black with background
<div id='my_div'>
<h1 class='my_div_child'>Good bye</h1> //Should be grey without background
</div>
<h1>Hello</h1> //Should be black with background
I need a selector that will override everything above it but has no precedence over anything below it. So remove the style set by h1 in the main div, then reset h1 of .my_div_child. it's not just the h1 element I'm having trouble with but that's the easiest example I can think of.
Okay, after seeing the updated post, I think I get the idea.
I think you may be simply using the wrong selectors. You may review CSS selectors if you're unsure.
For one thing, if you want to style an h1 with the class of my_div_child, the rule would be h1.my_div_child, or simply .my_div_child, if you don't have other, non-h1 elements with that class name. Using .my_div_child h1 will select h1 tags inside a parent container with the class of my_div_child, which is not what your HTML shows.
If you want to reset the styles of children of #my_div, you can use the all: initial selector with the wildcard like you did, but instead of using the direct child selector (>), just nest the wildcard regularly:
#my_div * {
all: initial;
}
If you use the direct child selector, only the first level of children in #my_div will be reset, but grandchildren of #my_div won't be, which is probably not what you want.
Those things cleared up, simply use the above statement to reset your styles and then start styling the contents of #my_div as needed, and it should work because various tags (e.g., h1) will be more specific than the wildcard. See code snippet below.
That said, you may find it easier to simply override certain styles that aren't what you want by using specificity than to reset everything in #my_div and start over. Odds are there are some styles the menu will share with the site overall. For example:
h1 {
font-style: italic;
}
#my_div h1 {
font-style: normal;
}
If these approaches don't work, and you're still having trouble with your styles not working, you'd have to post some more specific code so we can work out what the problem is.
Example reset:
html {
background-color: coral;
font-style: italic;
font-family: sans-serif;
}
h1 {
background-color: white;
}
#my_div * {
all: initial;
}
#my_div .my_div_child {
color: darkgray;
font-size: 4em;
/* note that font-style and font-family don't need rules b/c they have been reset by all: initial above */
}
<h1>Hello</h1> <!-- Should be black with background -->
<div id="my_div">
<h1 class="my_div_child">Good bye</h1> <!-- Should be grey without background -->
</div>
<h1>Hello</h1> <!-- Should be black with background -->
My main HTML formatting is controlled by the
<P>
tag.
My application is dynamically constructed HTML using HTML fragments stored in a database, and block of text are encapsulated in tags, and thus pick up the default CSS styling for the tags. However sometimes erroneous extra tags get inserted like tags which will then negate the styling. The problem is that these extra tags could be anything, so it is difficult to construct a rule for every scenario. So what I need is a CSS rule that will apply to any text within it regardless of other existent tags.
So normal situation:
<style>
p {font-family:arial}
</style>
<p>this would render as arial</p>
<p><span>problems here</span></p>
<p><span style="font-family:calibri">problems here definitely, need to have paragraph rules imposed here ie overrule span font rule</span></p>
So I would like to know how I can get the paragraph CSS rule to overrule all child tag css rules.
Possible?
Thanks in advance.
/* Any tag inside p */
p * {
font-family: Arial !important;
}
If you know specific tag, like span, then
p span {
font-family: Arial !important;
}
inheritvalue reference
Test page
This has the advantage that it will inherit any font properties which are set by the parent element thus p. The !important is only needed when it concerns inline styles to be able to overide it.
All properties
p * {
font: inherit !important;
}
Or specifically one property
p * {
font-family: inherit !important;
}
Try this;
p {
font-family: arial;
}
p * {
font-family: inherit !important;
}
jsFiddle
NOTE: IE 7 or minor versions do not support inherit value
Let's say that I want to specify Arial in the HTML header - and I want it to apply to everything.
Do I have to list each element type explicitly? Or can I set them all with a single statement?
You can use the * selector which applies to everything:
<style>
* {
font-family: Arial;
}
</style>
Note that this may be overkill for your purposes - due to the nature of CSS, styles set on parent elements are generally inherited by child elements, and thus, it's usually enough to set a font style on the body element to apply to the entire page.
body {
font-family: Arial;
}
No, generally specifying it on body is enough. That’s what the C in CSS is for: cascading. That means elements inherit the properties of their parent element. So anything under body (which should be everything) will inherit the font automatically.
body { font: 12px Helvetica, Arial, sans-serif; }
I prefer
body {
font-family: Arial;
}
and let it cascade down. This has the advantage of not stomping on explicit font selections further down the tree. If you want to stomp, use the * form in other answers