here I have HTML elements stacked like this,
.center-badge p {
font-size: 12px;
}
<div class="center-badge">
<div>
<p>Get a</p>
<p><strong>2% rate reduction</strong></p>
<p>with a</p>
<p>co-applicant</p>
</div>
</div>
and I have added the font size as 12px for the center-badge CSS. In this, we need to exclude the strong tag with p. Only the 12px styling has to apply all the p tags but a strong tag.
We have added a global styling for the p as 16px. How to exclude a particular element to not apply the parent CSS.
Is any way to solve this. can we can use the :not() for this scenario.
If an element has font-size: inherit or font-size: someUnitRelativeToTheParent — and it doesn't matter if that is set explicitly or by the browser stylesheet — then you can't make it not base the font-size on that of the parent element.
Likewise there is no way to write a selector with a condition "Unless the element's children include X" to avoid applying the font-size in that particular p in the first place.
You can either:
Explicitly style the strong element with a font-size that uses absolute units or
Change the DOM in such a way that you can exclude the p (e.g. by adding a class to it and adding :not(.that_class) to the stylesheet.
you have applied the global css like this I think.
p {
font-size: 16px;
}
but once you apply css using the parent class like this way
.center-badge p {
font-size: 12px;
}
it overrides your global css for <p> tag.
now <strong> has no browser default font size as <p> tag for the font-size property.
so you have to define it globally like this way
strong {
font-size: 16px;
}
or using parent class also you can apply the css like this way.
.center-badge strong {
font-size: 16px;
}
or you can apply it by giving the font-size: initial to the <strong> tag like this way.
.center-badge strong {
font-size: initial;
}
Related
What is the difference between setting some properties directly on the div container vs directly on the element in it. For example font-size:
<div class="the_last_of_us">
<h5>Cookie Settings</h5>
</div>
Major different between setting the font-size on div vs h1 or h5 in the above example is, setting the font-size will not be inherited by the h5 by default, as it will pick the styles from the User Agent Stylesheet, unless you explicitly define it to inherit, for example
h5 {
font-size: inherit;
}
Whereas setting the font-size explicitly on the h5 will override the user agent stylesheet and set the font-size you have defined for the h5 element.
In other scenarios, it makes sense to set the properties on the Parent element, which will be inherited by a few elements. This will help you keep your selector specificity low. For example, setting color to the div can be inherited by the h1 element.
So instead of a selector with a property like
div h5 {
color: #f00;
}
You can use
div {
color: #f00; /* Also applies color to any element inside
the div which can inherit color from the parent element */
}
Applying an enlarged font-size using em directly to a <p> tag and to the nested <span> tag are giving different results.
body {
font-size: 14px;
}
p {
font-size: 1.4em;
}
.enlarge {
font-size: 1.7em;
}
<p>Normal paragraph text</p>
<p class="enlarge">Enlarged text</p>
<p><span class="enlarge">This text comes out larger than the above.</span></p>
I was expecting both <p class="enlarge"> and <p><span class="enlarge"> to give me the same result.
Here is a working example: https://jsfiddle.net/huymo47b/
You can use rem (root em) instead of em
em is relative to the parent element, while rem takes reference from the root (html) value
The css code becomes
body {
font-size: 14px;
}
p {
font-size: 1.4em;
}
.enlarge {
font-size: 1.7rem;
}
The code can be tested here: https://jsfiddle.net/zrzahoro/
Update:
The rem takes reference from root, which it html tag. If you want to control the value of font being referenced in your css instead of letting it use the browser default value, give a fixed font-size to html tag too.
"The em unit is a relative unit based on the computed value of the font size of the parent element. This means that child elements are always dependent on their parent to set their font-size."
Reference: CSS-Tricks
Your <p> tag has already 1,4 of normal size and <span class="enlarge"> is 1,7 of its parent (which is already enlarged).
I have the following a HTML code:
<div>
<p> linux version</p>
<h1> new tool </h1>
And some CSS for it that should select <h1> but does not select anything.
*:not(div p) {
font-family: sans-serif;
}
The following does not work too:
*:not(div>p) {}
I have so many such <div> <p> in the HTML whereas the following selects and apply the font:
div p {
font-family: sans-serif;
}
As others have stated in the comments: the usage of the not selector is like this:
E:not(s) - an E element that does not match simple selector s
where
A simple selector is either a type selector, universal selector,
attribute selector, class selector, ID selector, or pseudo-class.
So if you want you code to work you'll have to add a class to the <p> elements which you don't want styled with that font-family.
*:not(.classname) {
font-family: sans-serif;
}
Alternatively: If you need to apply a font to all your elements - it is generally done by setting it in the body element, then the other elements in the document inherit that rule.
Then you can style your <p> elements within the div differently.
body
{
font-family: sans-serif;
}
div p
{
/* the special font-family that you need for paragraphs within a div */
}
<div>
<p> linux version</p>
<h1> new tool </h1>`
</div>
Now consider the following CSS code-
*:not(div p) {
font-family: sans-serif;
}
This code selects all elements except the <p> inside <div>. So a <div> is also selected by the selector *:not(div p) and hence all the contents of the <div> gets the style: font-family: sans-serif. So the text in the <p> element in the <div> also gets the style.
N.B. You should keep track so that two CSS declaration don't contradict each other. Then if such contradiction arises the declaration that applies some style wins over the declaration that forbids that style to be applied on that element.
Hence the following code will run fine
div>:not(p)
{
font-family: sans-serif;
}
This selector will select the elements inside a <div> except <p>-elements. So you may use this instead.
Well, it won't be exactly the same thing, but in this case you can use
div>*:not(p)
instead of
*:not(div>p)
Demo
It seems in your question, that given the markup:
<div>
<p>linux version</p>
<h1> new tool </h1>
</div>
<h1> elements are the special ones. So be specific. Rather than define styles for "all-but-me" (as you do with "*:not(div p)" clause) set and standard for "all-of-them" and then you overwrite the one you consider special. Just like here:
div {
font-family: serif;
}
div > h1 {
font-family: sans-serif;
}
I changed markup in one page like this,
before change
<div class="header-wrapper header">
<h1 wicket:id="headerTitle" class="dealer-name">Excellence Holden</h1>
</div>
after change
<h1 class="header-wrapper header">
<span wicket:id="headerTitle" class="dealer-name">Excellence Holden</span>
</h1>
after changing the mark up the font size of "Excellence Holden" is increasing .It will happen or I am doing something wrong ?
css code:
.header-wrapper {
padding:15px 0;
}
.header-wrapper .dealer-name {
text-align: center;
font-size: 1.3em;
}
After the change, the font size set on the inner element, 1.3em, changes its meaning. The reason is when used in the value of the font-size element, the em unit denotes the font size of the parent element. Here the parent element is an h1 element, and the common and recommended browser default is that h1 element has a font size of 2em, i.e. twice its parent’s font size.
To override this effect, add the following:
h1.header-wrapper { font-size: 1em; }
You need to change the font size of the span in css, find the font defined for h1 then apply the same font to the tag
Because if you do not reset the font-size for h1, it automatically is higher than normal.
I would say that is a CSS related,
usually the new CSS files contains Font (Size, Family, weight) properties for <h1> tags.
please check both h1 and span CSS Attributes. you can use the browser inspectors (Chrome Inspect Element) to see the actual attributes.
It's because of your styling. When changing HTML like this you need to ensure that the styling is also changed accordingly.
For example:
div.header { font-weight:bold; }
div.header h1 { font-size:24px; }
The above CSS would be applied to the first HTML snippet, but not the second. You'd have to change this to:
h1.header { font-weight:bold; }
h1.header span { font-size:24px; }
And also ensure that there is no other h1 or span styling that may affect this.
My Drupal theme generates:
<div class="field1">
Field 1
</div>
<div class="field2">
<h3>Field 2</h3>
</div>
The results is that Field 2 has another style.
How can I remove the effects of h3 using CSS?
Better way - remove h3 tag. But sometimes, when you need to reset all styles of parent element - use global attributes, like "font" for "font-size", "font-style" and so on...
Warning of inheriting paddings, margins borders and background styles - this can be look ugly. For example, when your element has padding and border wiil duplicates for each element:)
.someclass * {
font: inherit;
color: inherit;
/* optional reset */
background: transparent;
border: none;
margin: 0;
padding: 0;
}
http://jsfiddle.net/iegik/q72EM/
you can access the h3 as follows:
.field2 h3{ //style here }
This will change the style of any h3 inside an element with a class of field2. If you want to be extra specific:
div.field2 > h3 { //style here }
This will only change the style of an h3 element that is a first level descendant of a div with a class of field2. I would recommend you look into css selectors.
To remove any existing effects, you would have to overwrite them. This can be done by just setting the values back to the default for the element.
You can only "remove" the effects by setting properties to whatever value they had before the styles for <h3> get applied. For example you can reset the font size with
.field > h3 {
font-size: medium;
}
You will need to do this for all properties that get modified by your CSS or the browser's internal stylesheet, but there's help to be had: modern development tools (e.g. Chrome's) will allow you to inspect an element and show you what properties it has and where they came from (so you can see that font-size has been modified). Looking at the appropriate CSS standards will show you what the default value is for each of these properties (e.g. font-size is here).
you can easily edit like this :-
CSS
.field2 h3 {
color:red;
font-size:12px;
font-family:arial;
}
DEMO
Used to this
as like this
.field2 h3{
color:black;
font-size:20px;
}
You cannot remove the effects of tags in CSS, except by writing CSS code that overrides stylistic settings that elements have due to browser defaults or other settings.
For an h3 element, the properties that are probably set in browser default style sheets are display, unicode-bidi, font-size, font-weight, margin, and page-break-after. (Cf. to Appendix D of the CSS 2.1 spec, Default style sheet for HTML 4.) You can set these to the desired values, and even a simple selector will suffice, e.g.
h3 { font-size: 120%; font-weight: normal; margin: 0; }
However, other style sheets that affect your document may have other settings on h3. And there is really no law against browser default style sheets using e.g. colors for headings or setting a specific font family.
To override other CSS settings in general, you need to use CSS rules with a sufficiently specific selector.