I've been reading a lot about CSS inheritance but I haven't been able to find anything about this question, and I'm confused. Please consider the following:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.anc {
background-color: blue;
color: red;
}
.des {
background-color: inherit;
color: inherit;
}
</style>
</head>
<body>
<div class="anc">
<p class="des">
One <!-- Blue background, red text. Clearly inheritance. -->
</p>
</div>
<p class="anc">
<div class="des">
Two <!-- Why is nothing inherited here? -->
</div>
</p>
</body>
</html>
The "One" text is working as I'd expect. But I don't understand why the "Two" text doesn't have a blue background and red text as well.
Is there some special rule about inheritance for block elements as opposed to inline elements? Or something special just about div? What am I missing here? Do you have an online reference to a very thorough explanation of inheritance? Everything I've seen (and I've been looking a long time) just explains examples like "One", but doesn't address issues like "Two".
I know that there are many (better) ways to get the same visual effect I'm asking for here. But this example is about me trying to understand inheritance in general, not trying to get any particular effect on this HTML code.
Thank you so much for your help!
A <div> inside <p> tag is not valid HTML. If you check the rendered HTML, it probably looks something like this:
<p class="anc"></p>
<div class="dec">TWO</div>
<p></p>
The browser fixes the invalid nesting, but that breaks your CSS definition.
You can't nest block-level elements inside a <p> - the opening <p> ends up acting as a self-closing element and pushes the descendant div out of the <p> as a succeeding sibling. The paragraph also creates an empty <p> after the div; the structure ends up looking like:
<p class="anc"> </p>
<div class="des">Two</div>
<p></p>
A <p> can only contain inline elements. It is invalid to put a <div> in a <p>.
You swapped <div> and <p> in the second case. Also your css specifies .des, whereas your class name in the HTML is dec See working jsFiddle here.
<div class="anc">
<p class="dec">
One <!-- Blue background, red text. Clearly inheritance. -->
</p>
</div>
<div class="anc">
<p class="dec">
Two <!-- Why is nothing inherited here? -->
</p>
</div>
.anc {
background-color: blue;
color: red;
}
Also, there's no need for the inherit as the child will be rendered within the parent, whose style you set already.
Related
I have my profile image and below it I want to place my name and a few things about me. I don't know what to use for the image div or if I even need a div for it. Are the h1 and p elements used properly?
Snippet
<div class="profile">
<div><img src="profile_image.jpg"></div>
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
Full Body HTML
<body>
<div class="page">
<div class="profile">
<div><img src="profile_image.jpg"></div>
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
<div class="sites">
<ul>
<li><img src=""> <img src=""></li>
</ul>
</div>
</div>
</body>
The rest of the site are just app icons taking to my social media sites. There's no other content. My site also doesn't have a header or footer. Not sure if my profile class should be considered the header at this point for good SEO.
You do not need to put the div around the image. Just style it to display: block (img defaults to display: inline)
<div class="profile">
<img style="display: block" src="profile_image.jpg">
<h1>first last</h1>
<p>Coffee snob.</p>
</div>
Otherwise, the rest of the code is perfectly fine.
It does depend of what exactly you want to do with it but if I understand your question.
You don't need divs for your image just set up different image classes in your CSS.
.image1
{
width:100px;
height:100px;
}
Then your HTML would look like
<img src="profile_image.jpg" class="image1">
Check out http://www.w3schools.com/css/css_align.asp for more information about how to actually set up alignments in your CSS
It might be worth using a div to style your text into a block or format it to look nice, etc. But you don't need to do it
http://www.w3schools.com/tags/tag_div.asp for div styling .
And finally abit of personal experience, spend an hour or 2 looking through W3Schools CSS section and learning the basics of styling it's a great way to learn the basic tools you need to work with CSS and make your pages look good !
Edit styling text
<h1>first last</h1>
<p>Coffee snob.</p>
so first you could style them in your css as the elements they are
h1
{
text-align:left;
padding-left: 10px;
text-decoration: underline;
}
p
{
text-align: right;
}
Doing thing your HTML would look exactly as it is you wouldn't have to change anything. Obviously this is something you can only do once for all <p> and <h1> content and every time you use those tags without specifying a class for them it'll look exactly like whatever the above CSS is.
The other option is to do what I suggested with the image and give them a unique class.
p.body
{
text-align: right;
}
Here you'll need to add class to <p> jsut like you did for image which will look like
<p class="body">Coffee snob.</p>
Hope that helps !
I'm in a situation where the number of elements showed is variable, and I need a strange solution which I'm not able to achieve, I even doubt if it's achievable only with css.
I need to select the last-child if my number of elements is odd, and the last 2 child if the number of elements is even.
I've been trying with nth-last-child, :not(:nth-last-child()), odd and even, but never got a good solution.
Anyone has any idea/advice about this issue a part of adding a class "odd" like on html tables?
Thanks a lot in advance!
Here is one way...
.wrap div:last-child,
.wrap div:nth-last-of-type(-n+2):not(:nth-child(even)) {
color: red;
}
<div class="wrap">
<div>Odd</div>
<div>Even</div>
<div>Odd</div>
<div>Even</div>
<div>Odd</div>
<div>Even</div>
</div>
<hr>
<div class="wrap">
<div>Odd</div>
<div>Even</div>
<div>Odd</div>
<div>Even</div>
<div>Odd</div>
</div>
You can use CSS like so:
li:last-child:nth-child(odd) {
/* Last child AND odd */
background: red;
}
li:nth-last-child(2):nth-child(odd),
li:last-child:nth-child(even) {
/* Before last child AND odd */
/* Last child AND even */
background: green;
}
Demo: https://jsfiddle.net/hw0ehrhy/
Absolutely it can be done, with pure CSS. See the complete code below (odd child, last child red; even childs, last 2 childs green)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#but1').click(function(){
var count = $('p').length;
if (count%2!=0) {$('div>p:last-child').css('background','red');}
else {$('div>p:last-child').css('background','green');alert(count);
$('div>p:nth-last-child(2)').css('background','green');
}
});
});
</script>
</head>
<body>
<button id=but1>Click</button>
<div>
<p>This is one. </p>
<p> This is two. </p>
<p> This is three. </p>
<p> This is four. </p>
<p> This is five. </p>
<p> This is six. </p>
</div>
</body>
</html>
Enjoy, the coding ;)
I'm having an issue coloring a span with css. Everything is working fine on the webpage however when I try to select a span in a div it doesn't work. Am I missing something dumb here?
<!doctype html>
<html>
<head>
<title>Test</title>
<link href="style/mainstyle.css" rel="stylesheet" type="text/css">
<script src= https://code.jquery.com/jquery-latest.min.js></script>
</head>
<body>
<header>
<h1>TEST</h1>
</header>
<main>
<div class = "tab1 triad">
<script src="primejs.js"></script>
<span class="red"><h2>Type in a number and I'll check if it is prime:</h2></span>
<input class = "primeNum" type = "text">
<button class = "submit">Submit</button>
<span class = "result">
<h2>What I found: <span class = "answer">?</span></h2>
</span>
</div>
</main>
</body>
and here is the css:
.tab1 span.red {
color: RED;
font-size: 100;
}
Cleaned up your HTML, you had a some stray and missing tags.
Bin demo
<div class="tab1 triad">
<span class="red">
<h2>Type in a number and I'll check if it is prime:</h2>
</span>
<input class="primeNum" type="text">
<button class="submit">Submit</button>
<span class="result">
<h2>What I found: <span class="answer">?</span></h2>
</span>
</div>
And your css was missing the px after 100
.tab1 span.red {
color: red;
font-size: 100px;
}
try this
.red {
color: red;
font-size: 100px; /* specify a unit like px, em, ... */
}
First of all, the HTML code you have posted is not valid. You can use the official W3C validator to check if you like. The main issue is the spaces either side of your = when declaring attributes. Spaces are only ever used in between different attributes. Also, h2 elements are block type elements, and are therefore not allowed inside of an inline element (e.g., span).
Secondly, the CSS is also not all valid. Firstly, there is no need to make anything uppercase, as is shown for the colour name. color:red; will work just fine. Also, you have not specified any units of measurement for the font-size property. I assume you intended for the text to be at 100pt, in which case you need to use font-size:100pt;. Other valid units of measurement include px, cm and rem.
I recommend you read information on the Mozilla Developer Network for examples if you would like to learn more. It includes accurate pages about HTML elements, CSS properties and JavaScript.
Edit:
The following would help to fix the HTML:
Change doctype to DOCTYPE, which improves compatibility.
Move all script tags into the head tag.
Ensure that all inputs, buttons, etc. are inside of form elements.
Remove spaces around = signs.
Make the href attribute of the stylesheet link tag the second attribute, and make the rel attribute the first. This is primarily for consistency.
I have the following two sections of code generated by a Wordpress theme.
This first section of code is generated for a WP Page:
<div class="postinner">
<div itemprop="name">
<h1 class="pagetitle">My Title</h1>
</div>
<p>First line of text</p>
<p>Second line of text</p>
</div>
This second section of code is generated for a WP Post:
<div class="postinner">
<article itemtype="http://schema.org/Article" itemscope="" role="article">
<div itemprop="headline">
<h1 class="pagetitle">Hello World!</h1>
</div>
</article>
</div>
I cannot figure out the CSS selector to specifically target and center the text of the H1 tag within the "itemprop DIV" for the 1st section of code.
Also, I would also like to target and style the H1 tag in the WP Post with a different text color but again, cannot figure out CSS selector.
You could try using CSS Attribute Selectors, such as:
div[itemprop="name"] h1 {
color: red;
}
and:
div[itemprop="headline"] h1 {
color: yellow;
}
example: http://jsfiddle.net/bEUk8/
The [att=val] selector (as suggested by Stuart Kershaw’s) works if the itemprop attribute has only this token as value.
But the itemprop attribute can have multiple tokens as value, in which case the [att=val] wouldn’t match anymore.
So you might want to use the [att~=val] selector, which matches in both cases: if it’s the only token or if it’s one of multiple tokens.
Example
Although both span elements have the name token as value of itemprop, only the first one is matched by the CSS rule with the [itemprop="name"] selector:
[itemprop="name"] {font-size:200%;}
[itemprop~="name"] {color:red;}
<div itemscope>
<span itemprop="name">'name'</span>
<span itemprop="name headline">'name' and 'headline'</span>
</div>
Hi all could some please tell me where I am going wrong in the following code. I am trying to apply the following css styles to my page as below my issue is getting it to work properly.
I understand #cookieTerms is a selector which stops the elements being mixed up with the sites main style.css elements.
I thought to call these you would wrap your code in the tag
<div id="CookieTerms"></div>
but so far no luck for me. My simple code and output is below. Any help much appreciated guys.
<style type="text/css">
#cookieTerms{font-family:Arial, Helvetica, sans-serif;color:#DDD;display:none;width:100%;background:rgb(5,5,5);color:#DDD;margin-top:0;padding-top:4px;overflow:auto;}
#cookieTerms .inner{margin:auto;width:960px;}
#cookieTerms div.big{padding-left:5px;float:left;width:680px;}
#cookieTerms div div{padding-left:5px;float:left;width:110px;}
#cookieTerms div h5, #cookieTerms div p{font-size:14px;}
#cookieTerms div h5{font-size:18px;}
#cookieTermsagree{font-size:16px;color:#000;border-top:none;-webkit-border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;-moz-border-radius:8px;border-radius:8px;border-radius:8px;font-weight:normal;text-align:center;background-image:url(../images/goldBar.png);cursor:pointer;display:inline-block;width:100px;}
#cookieTermsagree:hover{background-image:url(../images/greenBar.png);}
#cookieTerms a:link, #cookieTerms a:visited{color:#f6A21D;}
}
</style>
</head>
<div id="CookieTerms">
<div id='inner'><div><h5>Cookies Policy</h5></div><div id='big'>
<p>Like most websites we use cookies blah blah. <a href='cookies.html'>Tell me more about cookies</a>.</p></div><div><p id='cookieTermsagree'>Close Cookie Message</p></div></div></div>
</body>
</html>
Ids are case-sensitive. You named the id CookieTerms (with uppercase C), but you select the id cookieTerms (with lowercase c).
Change your id (or the selectors...) to:
<div id="cookieTerms">
The case on your ID doesn't match the CSS.
It should be (if I understand your problem correctly):
<div id="cookieTerms">
<div id='inner'><div><h5>Cookies Policy</h5></div>
<div id='big'>
<p>Like most websites we use cookies blah blah. <a href='cookies.html'>Tell me more about cookies</a>.</p></div><div><p id='cookieTermsagree'>Close Cookie Message</p></div>
</div>
</div>