I have the following html:
<body>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<h3 id="fancy">
This is one fancy heading!
</h3>
<p>
But I am a very plain paragraph
</p>
<p id="fancy"> But I'm fancy too!
</body>
With the following css:
body {
margin-left: 20px;
}
body :nth-child(7) {
font-family: courier;
}
#fancy {
font-family: Cursive;
}
I am wondering about the css only changing the paragraph's font to courier when the nth-child is labeled as 7. Every way I count it, I only see it logically being the 6th, 5th (if it is starting at 0) or maybe even 2nd child (if it for some reason is not counting the div's). Can someone explain to me how the "very plain paragraph" is the 7th child of the body?
The 7th child is
<p id="fancy"> But I'm fancy too!</p>
(FYI you were missing closing </p> tag)
To make it easier to see, look at this JS Fiddle Demo where I've added color:red; to body :nth-child(7).
To break it down further
body {
margin-left: 20px; //this is applied to all of your elements
}
body :nth-child(7) {
font-family: courier; //this is applied to 7th child
}
#fancy {
font-family: Cursive;
//this is applied to all elements with id="fancy" including the 7th child
//this overwrites font-family: courier;
}
Also as noted by DJ #Paulie_D, don't use an id more than once per page. Instead use class="fancy" and in your CSS .fancy instead of #fancy.
Like what was mentioned by Paulie_D and Dan, ID's should not be repeated.
If you change the id to a class, you will notice that the 'nth-child' selector has more weight than the class selector. So you will need to either add '!important' like so:
.fancy {
font-family: Cursive !important;
}
Or include the elements selected:
p.fancy, h3.fancy {
font-family: Cursive;
}
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<h3 class="fancy">This is one fancy heading!</h3>
<p> But I am a very plain paragraph</p>
<p class="fancy"> But I'm fancy too!</p>
/In CSS please make .fancy instead of #fancy/
<style>
body {
margin-left: 20px;
}
body :nth-child(7) {
font-family: courier;
}
.fancy {
font-family: Cursive;
}
</style>
Related
I have a .header div with a span maindomain and a div otherdomains inside of it:
<div class="header"><span class="maindomain">LatestFooty.co.uk</span> is currently available for sale, along with:
<div class="otherdomains">
LatestFootie.com<br>
LatestFootie.co.uk
</div>
</div>
I'm trying to target the is currently available for sale, along with:, without touching the contents of .maindomain or .otherdomains. I understand that the best approach to this might be to wrap it in a span and target that instead, but at this point I'd like to figure out why I can't get the :not pseudo-class working.
Here is what I have:
#media (min-width:300px) and (max-width:450px) {
.header:not(.maindomain):not(.otherdomains) {
font-style: italic;
}
}
As far as I can tell, the syntax is correct, and I don't think it's a specificity issue because !important doesn't make a difference. What am I doing wrong?
.header:not(.maindomain):not(.otherdomains) only targets elements which have the .header class and don't have the .maindomain and/or the .otherdomain class themselves.
Your rules currently say:
<div class="header"> is targeted
<div class="header maindomain"> is not targeted
<div class="header otherdomains"> is not targeted
<div class="header maindomain otherdomains"> is not targeted
But this is not what you want to do here obviously.
You cannot apply rules to the .header class depending on classes of its children with CSS alone.
There's an approved answer to your question here which might guide you in the right direction (using JavaScript or jQuery in that case).
You will need two selectors:
.header {
font-style:italic;
}
.header .otherdomains,
.header .maindomain {
font-style:initial;
}
/* OR
.header * {
font-style:initial;
}
*/
<div class="header"><span class="maindomain">LatestFooty.co.uk</span> is currently available for sale, along with:
<div class="otherdomains">
LatestFootie.com<br>
LatestFootie.co.uk
</div>
</div>
I'm trying to target the "is currently available for sale, along with:", without touching the contents of .maindomain or .otherdomains.
You can't target anonymous elements in CSS.
CSS rules need a "hook" in the HTML to attach to. That hook is an HTML tag. Without the tag, CSS has nothing to target. This concept applies across box models.
From MDN:
An anonymous box is created when there is not an HTML element to use for the box. This situation happens when, for example, you declare display: flex on a parent element, and directly inside there is a run of text not contained in another element. In order to fix the box tree, an anonymous box is created around that run of text. It will then behave as a flex item, however, it cannot be targeted and styled like a regular box because there is no element to target.
(emphasis mine)
Everything is in the demo itself, the JavaScript is for demo purposes.
Demo
const lnx = [...document.links];
lnx.forEach(lnk => lnk.addEventListener('click', viewHTML));
function viewHTML(e) {
const link = e.target;
const headers = document.querySelectorAll('.'+this.dataset.tag);
headers.forEach(hdr => {
if (!hdr.matches('.hide')) {
link.className = 'off';
let str = hdr.outerHTML;
let txt = document.createElement('div');
txt.className = 'txt';
hdr.insertAdjacentElement('afterend', txt);
hdr.nextElementSibling.insertAdjacentText('beforeend', str);
hdr.classList.add('hide');
} else {
link.className = '';
hdr.classList.remove('hide');
hdr.nextElementSibling.remove();
}
});
}
body {
font: 400 2.5vw/1.5 Consolas
}
[class^=header] {
font-family: Arial;
}
/* Header (OP)
Selector fails -- :not() is prefixed incorrectly
.header:... means .header is targeted
.header :... means the descendants of .header is targeted
There is no .header.A, .header.B, nor .header.A.B
so .header without .A and/or .B will have everything in italics
*/
.header:not(.A):not(.B) {
font-style: italic;
}
/* Header 1
Best solution with no extra HTML tags:
Assign font-style: normal...
directly (.C1, .D1)
or by class (.N)
*/
.header1 {
font-style: italic;
}
.C1,
.D1,
.N {
font-style: normal;
}
/* Header 2
Using :not() needs extra HTML tag:
Wrap second textnode in an inline or inline-block tag
As content of a descendant tag, the text can be targeted
*/
.header2 *:not(.E):not(.F) {
font-style: italic;
}
/* Header 3
Smart solution with extra HTML tag:
Wrap second textnode in <i> or <em>
*/
.header3 {
/* no styles needed */
}
/* Header 4
Slickest solution with least HTML:
Wrap text that needs italics in <i> and then style lines with CSS
*/
.header4 {
white-space: pre-line;
}
/* For Demo Purposes */
.dash {
border-style: dashed;
}
.edge {
border-style: ridge;
border-width: 3px;
}
summary:hover {
color: lime;
background: #000;
cursor: pointer;
}
summary + u {
display: inline-block;
text-decoration: none;
white-space: pre-line;
}
code {
color: green;
background: rgba(0, 0, 0, 0.2);
white-space: pre;
}
summary + code {
display: block;
}
a {
display: block;
text-decoration: none;
text-align: center;
}
a:link,
a:visited {
color: cyan;
background: #000;
}
a:hover,
a:active {
color: blue;
background: none;
}
a::before {
content: 'View .'attr(data-tag);
}
a.off::before {
content: 'Hide .'attr(data-tag);
}
a::after {
content: ' HTML';
}
.hide {
display: none;
}
.txt {
color: blue;
background: rgba(0, 0, 0, 0.2);
white-space: pre;
}
<main>
<hr class='edge'>
<details><summary>Header (OP)</summary>
<u>Selector fails -- :not() is prefixed incorrectly
.header:... means .header is targeted 👎
.header<code>␣</code>:... means the descendants of .header is targeted 👍
There is no .header.A, .header.B, nor .header.A.B so
.header <em>without</em> .A and/or .B will have everything in italics</u></details>
<details><summary>CSS</summary>
<code>.header:not(.A):not(.B) {
font-style: italic;
}</code>
<a href='#/' data-tag='header'></a>
</details>
<hr>
<div class='header'>
<span class="A">LatestFooty.co.uk</span> is currently available for sale, along with:
<div class="B">
LatestFootie.com<br> LatestFootie.co.uk
</div>
</div>
<hr class='edge'>
<details><summary>Header 1</summary>
<u>Best solution with no extra HTML tags:
Assign <code>font-style: normal</code>...
directly (.C1, .D1)
or by class (.N)</u></details>
<details><summary>CSS</summary>
<code>.header1 {
font-style: italic;
}
.C1,
.D1,
.N {
font-style: normal;
}</code>
<a href='#/' data-tag='header1'></a>
</details>
<hr>
<div class="header1">
<span class="C1">LatestFooty.co.uk</span> is currently available for sale, along with:
<div class="D1">
LatestFootie.com<br> LatestFootie.co.uk
</div>
</div>
<hr class='dash'>
<div class="header1">
<span class="C2 N">LatestFooty.co.uk</span> is currently available for sale, along with:
<div class="D2 N">
LatestFootie.com<br> LatestFootie.co.uk
</div>
</div>
<hr class='edge'>
<details><summary>Header 2</summary>
<u>Using :not() needs extra HTML tag:
Wrap second textnode in an inline or inline-block tag
As content of a descendant tag, the text can be targeted</u></details>
<details><summary>CSS</summary>
<code>.header2 *:not(.E):not(.F) {
font-style: italic;
}</code>
<a href='#/' data-tag='header2'></a>
</details>
<hr>
<div class='header2'>
<span class="E">LatestFooty.co.uk</span> <span>is currently available for sale, along with:</span>
<div class="F">
LatestFootie.com<br> LatestFootie.co.uk
</div>
</div>
<hr class='edge'>
<details><summary>Header 3</summary>
<u>Smart solution with extra HTML tag:
Wrap second textnode in <code><i></code> or <code><em></code></u></details>
<details><summary>CSS</summary>
<code>.header3 {
/* no styles needed */
}</code>
<a href='#/' data-tag='header3'></a>
</details>
<hr>
<div class='header3'>
<span class="G">LatestFooty.co.uk</span> <i>is currently available for sale, along with:</i>
<div class="H">
LatestFootie.com<br> LatestFootie.co.uk
</div>
</div>
<hr class='edge'>
<details><summary>Header 4</summary>
<u>Slickest solution with least HTML:
Wrap text that needs italics in <code><i></code> and then style lines with CSS</u></details>
<details><summary>CSS</summary>
<code>.header4 {
white-space: pre-line;
}</code>
<a href='#/' data-tag='header4'></a>
</details>
<hr>
<header class='header4'>LatestFooty.co.uk <i>is currently available for sale, along with:</i>
LatestFootie.com
LatestFootie.co.uk
</header>
</main>
In CSS is it possible to use the inherit property to inherit from a specific element?
For example is there CSS syntax which could let this <p> inherit from container1 instead of container2? Assuming there isn't cause searched for quite a while to find this but I hope you can prove me wrong.
.container1{
color: blue
}
.container2{
color: green
}
.p {
color: inherit;
}
<div class="container1">
<div class="container2">
<p>
foo
</p>
</div>
</div>
To prevent an element from inheriting from its parent, you could explicitly exclude it from its parent's CSS using the :not() pseudo-class:
For example:
.container2 :not(p) {
color: green;
}
Snippet:
.container1 {
color: blue;
}
.container2 :not(p) {
color: green;
}
<div class="container1">
<div class="container2">
<p>
Feeling rather blue today.
</p>
<span>
It's not easy being green.
</span>
</div>
</div>
My paragraph is black even though I specified a (supported) color.
Where seems to be the error?
How do I fix it?
Thanks!
HTML code:
<div id="welcome">
<p>
<center><b><em> AaBbCcDdEeFfGgHh</em></b></center>
</p>
</div>
CSS code:
body {
background: -webkit-linear-gradient(left,#2e4053,#212F3C);
background: -o-linear-gradient(left,#2e4053,#212F3C);
background: -moz-linear-gradient(left,#2e4053,#212F3C);
background: linear-gradient(left,#2e4053,#212F3C);
background-color:#2e4053;
}
p{
font-family:Noto Sans Sinhala;
src: url('Font/NotoSansSinhala-Regular.ttf');
font-style: ;
font-size:50%;
color:#f4f6f7 !important;
font-weight:500;
}
It's because <center> is a block level element. You can't have a block level element inside of a <p> (paragraph) element. The reason for this is a nuanced alternative syntax for paragraph tags that excludes the closing tag. You can have a paragraph tag written like the following and have it validate:
<p>This is a paragraph element that doesn't have a closing tag.
<p>Here's another. This is all valid HTML.
The definition of this functionality can be found in the w3c documnetation under the "Tag omission in text/html" part. Because of this, generally when a paragraph tag hits a block level element, it assumes that the tag has closed. Your HTML then becomes this:
<div id="welcome">
<p></p>
<center><b><em> AaBbCcDdEeFfGgHh</em></b></center>
<p></p>
</div>
As you can see, this means that your em is not technically inside a paragraph. It's recomended that you instead use the text-align:center CSS property as <center> is deprecated.
body {
background: -webkit-linear-gradient(left,#2e4053,#212F3C);
background: -o-linear-gradient(left,#2e4053,#212F3C);
background: -moz-linear-gradient(left,#2e4053,#212F3C);
background: linear-gradient(left,#2e4053,#212F3C);
background-color:#2e4053;
}
p{
font-family:Noto Sans Sinhala;
src: url('Font/NotoSansSinhala-Regular.ttf');
font-style: ;
font-size:50%;
text-align: center;
color:#f4f6f7;
font-weight:500;
}
<div id="welcome">
<p>
<b><em> AaBbCcDdEeFfGgHh</em></b>
</p>
</div>
you can do this in 2 ways.
1.try removing the id=welcome.
or
call the id=welcome in css and specified a (supported) color.
HTML code:
<div>
<p>
<center><b><em> AaBbCcDdEeFfGgHh</em></b></center>
</p>
</div>
CSS code:
body {
background: -webkit-linear-gradient(left,#2e4053,#212F3C);
background: -o-linear-gradient(left,#2e4053,#212F3C);
background: -moz-linear-gradient(left,#2e4053,#212F3C);
background: linear-gradient(left,#2e4053,#212F3C);
background-color:#2e4053;
}
p {
font-family:Noto Sans Sinhala;
src: url('Font/NotoSansSinhala-Regular.ttf');
font-style: ;
font-size:50%;
color:#f4f6f7 !important;
font-weight:500;
Below is my code. With that 2nd <p> is becoming bold. I just need first <p> bold only. I don't want to add any class for 1st <p>.
.person {
p + p {
font-weight: bold;
}
}
<div class="person">
<p>I am good</p>
<p>You are also good</p>
</div>
.person p:first-of-type { } or even .person p:first-child { } would work. The selector you are using literally translates to "A Paragraph immediately following a Paragraph within class .person"
.person {
p:first-child {
font-weight: bold;
}
}
my current html:
<section class="menu-group">
<h2 class="menu-group-name">Appetizers</h2>
<div class="menu-item-line">
<h3 class="menu-item">Battered Cauliflower(GF,SF), Tofu (GF), or Kalebone (SF)</h3>
<h3 class="menu-item-price">$3.90/ea</h3>
</div>
<div class="menu-item-line">
<h3 class="menu-item">Herb Potatoes (GF)</h3>
<h3 class="menu-item-price">$3.50</h3>
</div>
<p class="item-desc">A tasty order of our baked seasoned potatoes</p>
<div class="menu-item-line">
<h3 class="menu-item">Eggless Bowl (GF)</h3>
<h3 class="menu-item-price">$3.00</h3>
</div>
<p class="item-desc">Our most popular eggless salad served chilled with whole wheat crackers</p>
</section>
and the relevant css:
.menu-item, .menu-item-price {
font-family: 'Francois One', sans-serif;
font-size: 18px;
margin: .5em 0;
color: black;
display: inline-block;
}
.menu-item {
max-width: 300px;
}
.menu-item-price {
float: right;
/*margin: 0 0 0 5px;*/
}
.item-desc {
font-family: 'Open Sans', sans-serif;
color: black;
font-size: 18px;
/*float: left;*/
max-width: 300px;
/*font-style: italic;*/
margin: 0;
}
Is there a way to grab all "(GF,SF)" (and all other permutations of "___free") using css and make the text slightly smaller? I could not find a way except altering the markup. Thanks
Yes you can do without altering markup, but you will have to use javascript or jquery for that.. but if you are only sticking to css to accomplish it, you will have to alter the markup.. need to catch it in <span> and use h3 > span and give the new font size
You might try wrapping each abbreviation in a abbr tag and then use the title attribute to provide a key to the meaning of the abbreviation.
Reference: http://www.w3.org/TR/html-markup/abbr.html#abbr
You can then define a CSS rule for abbr to style it as you want.
As for the opening and closing parentheses, maybe use first-child and last child selectors with pseudo elements.
<abbr title="Good Food">GF</abbr>