I'm not understanding why the innermost nested div below isn't the same size as the #smaller-size. It's a direct descendant. Is it because the global * style is more specific? This is really gut-punching my page. What am I missing? Thanks!
* { font-size: 15pt; }
#smaller-size { font-size: 0.8em; }
<div>
This should be the size specified by * (and it is)
<div id="smaller-size">
This should be the smaller size (and it is)
<div>
This is nested in #smaller-size, so it should also be smaller (but it's not!)
</div>
</div>
</div>
The specificity of the "*" selector is the lowest possible (0,0,0,0), but it applies to every element applicable, so every div will be:
* { font-size: 15pt; }
By the time you are setting the new specificity with the # selector:
#smaller-size { font-size: 0.8em; }
Only the element with the corresponding id selector will have higher specificity than the rest, affected by *, which are all of them.
Creating in this particular element (0,1,0,0) especificity value.
This id applies to that particular element only.
If for example you stablish something like:
#smaller-size>div { font-size: 0.2em }
Then all elements div under id smaller-size will have higher specificity than the ones affected by just *
Creating something like that:
<div> -- specificity (0,0,0,0) = 0
<div id="smaller-size"> -- specificity (0,1,0,0) = 100
<div> -- specificity (0,1,0,1) = 101
</div>
</div>
</div>
With this logic:
* { font-size: 15pt; }
#smaller-size { font-size: 0.8em; }
#smaller-size>div { font-size: 0.7em; }
#smaller-size>.smaller { font-size: 0.6em; }
<div>
specificity of this element (0,0,0,0) = 0
<div id="smaller-size">
specificity of this element (0,1,0,0) = 100
<div>
specificity of this element (0,1,0,1) = 101
</div>
<div class="smaller">
specificity of this element (0,1,1,1) = 111
</div>
<div class="smaller" style="font-size: 0.5em;">
specificity of this element (1,1,1,1) = 1111
</div>
<p>
specificity of this element (0,0,0,0) = 0
</p>
</div>
</div>
Here is a very good post explaining how specificity works.
Is it because the global * style is more specific?
No. It is because it matches the element and #smaller-size does not.
Specificity only matters when both selectors match the same element.
If you didn't have * { font-size: 15pt; } then the inner div would have the default value for font-size which will be something along the lines of 100% (i.e. the same size as the parent element).
You should probably just set the font size on body and let inheritance take case of the rest. Although there are a few gotchas:
Form controls don't default to 100% so you might want to explicitly set the size for input elements and the like
In Quirks mode fonts may not inherit into tables by default, so ensure you have a Doctype that triggers Standards mode
pt is a unit designed for physical media. It does not get rendered accurately on screen. Consider using a different unit (like pixels).
Yes, it is because your global * style. Your nested div has no class or id, and the browser tries to find the first applicable style element, and it is the *.
Related
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;
}
In the process of making a single page website, the css for my form is interfering with the rest of my page. Can the div be specified without going one by one through the css and specifying the div. Any help appreciated.
I recommend you to read up on CSS Selectors, which are different ways in CSS that you can select specific parts of your HTML elements.
The most basic ones are:
The Element Selector
p { color: #ff0000; }
This selects any element in your HTML that match the CSS rule. In this case it would match all <p>.
The ID Selector
#paragraph { color: #ff0000; }
This selects the element that got a unique ID set to "paragraph". In this case it would select any of the following elements:
<div id="paragraph"></div>
<p id="paragraph"></p>
<span id="paragraph"></span>
Note that ID's are suppose to be unique. You are not suppose to have multiple elements with the same ID in your HTML.
The Class Selector
.paragraph { color: #ff0000; }
The class selector selects all element with a class name that match the CSS rule. Note that class names do not need to be unique, unlike ID's, many elements can share the same class name.
The rule above match all of the following elements
<div class="paragraph"></div>
<p class="paragraph header"></p>
<span class="image paragraph"></span>
You can also combine these (and other CSS selectors) to be more specific of what you want to select and style with your rule. For example, if you only want to select all <p> with the class name paragraph, but no other elements with the same class. You would write the following:
p.paragraph { color: #ff0000; }
Fix your problem
With the knowledge above you can easily fix the issue you are having. The CSS of your form is very generic and it uses Element Selectors to select all elements on the page. You can fix this by setting classes and ID's on your HTML elements, and then adjusting your CSS rules to select the specific elements that you want to change.
The form you are trying to use includes some very generic CSS - it styles the <body> and <header> elements, for starters, as well as all <input> elements. If you want to limit the impact of the CSS from the form on the rest of your site, you will need to make it more specific. For example, if you change
header {
position: relative;
margin: 100px 0 25px 0;
font-size: 2.3em;
text-align: center;
letter-spacing: 7px;
}
to
#form header {
position: relative;
margin: 100px 0 25px 0;
font-size: 2.3em;
text-align: center;
letter-spacing: 7px;
}
it will only be applied to <header> elements that are inside of an element with the id="form" attribute (in this case, that's the ID on the form you are trying to use). You may have to add this more specific selector to several of the CSS selectors from the form that are impacting other parts of your page.
When HTML span has CSS font-family, I can't force it to use parent font-family
.Parent {
font-family: tahoma !important;
}
.Child {
font-family: cursive, geneva;
}
<div class="Parent">
<span class="Child">Text</span>
</div>
Why span don't use parent font-family?
How can I make this work?
You could select all the children elements using .parent * and then set font-family to inherit. This will effectively override the child element font and force all children elements to inherit the value of whatever the closest parent element's font is.
.parent {
font-family: tahoma;
}
.child {
font-family: cursive, geneva;
}
.parent * {
font-family: inherit;
}
<div class="parent">
<span class="child">Text</span>
</div>
And if you only want to target the .child element, you would obviously change the selector to .parent .child.
Depending on what you're trying to achieve, it's also worth mentioning that you can use the direct child selector, >, in order to only target direct children: .parent > *.
.parent {
font-family: tahoma;
}
.descendant {
font-family: cursive, geneva;
}
.parent > * {
font-family: inherit;
}
<div class="parent">
<span class="descendant">Direct child. <em class="descendant">Not a direct child</em></span>
</div>
CSS priority goes something like this:
Rules on this element marked with !important
High to low rule scoring based on the number of ID tags, classes, etc., for rules applying to this element.
The browser's default user agent styles.
For rules that are inherited by default, like font-family (but not others like background-color), the current value of the parent(s).
What your child node is getting is not number 1. in that list, but 4. The !important flag is making sure that the parent has that font set, but that importance does not carry over to children. You could set font-family: inherit !important if you really, really want every element to take its parent font.
Word of advice, though: Only use !important in extreme situations. You can often one-up another CSS rule's priority in a much more gentle way.
.formWrap input[type="text"] {
font-size: 12px;
}
.bigger {
font-size: 14px
}
<div class="formWrap">
<input type="text" class="bigger" />
</div>
Why does the above not make the text of the input field 14px?
When I am using the input[type="text"] selector how can I target a particular class that is a child of formWrap?
Is there a better method to give all my inputs a particular style then be able to make adjustments to certain inputs (hopefully based on a class)?
The answer is Specificity.
Your first selector has higher specificity than your second selector, so its properties are prioritised.
.formWrap input[type="text"] contains a class, an element and attribute selector. As per the CSS selectors specification (linked above), this selector has a specificity of 21. .bigger on the other hand only has a class selector, and therefore only has a specificity of 10. 21 is greater than 10.
From MDN:
Specificity is the means by which a browser decides which property values are the most relevant to an element and gets to be applied. Specificity is only based on the matching rules which are composed of selectors of different sorts.
In your case, an easy way to get your second selector to be prioritised over the first is by increasing this selector to have equal or higher specificity:
input.bigger {} /* 11 */
You can even repeat the same selector multiple times (as also noted in the specification):
input.bigger.bigger {} /* 21 */
Note that if the specificity of both selectors are equal, the selector included later in your stylesheet will be the one prioritised.
The first selector has higher specificity than the .bigger class.
To increase the specificity of the .bigger class, you could do this:
.formWrap input[type="text"]{
font-size: 12px;
}
.formWrap input[type="text"].bigger{
font-size: 14px
}
OR (Not really recommended):
.bigger{
font-size: 14px !important;
}
There is a good article on specificity and how to calculate here. Something that takes a while to click when first starting to write CSS.
Calculating CSS Specificity Value
http://css-tricks.com/specifics-on-css-specificity/
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;
}