<header class="entry-header">
<div class="entry-header-inner">
<h1 class="entry-title">TITLE 1</h1>
</div>
</header>
elsewhere on the page:
<header class="entry-header">
<div class="entry-header-inner">
<h2 class="entry-title">TITLE 2</h2>
</div>
</header>
I want to affect TITLE 1 with css, without affecting TITLE 2.
This is a generated code, I can't add ID. Also I didn't find suitable parent for TITLE 1.
How should I do it? Possibly without javascript or Jquery. With it if not possible.
You can apply some CSS on .entry-title h1 which will only be applied for TITLE 1 since your TITLE 2 is an h2
-EDIT:: Use .entry-header-inner h1 not .entry-title h1
If you want to select the title of first header, whatsoever it is H1 or H2, the following code should work.
.entry-header:nth-child(1) .entry-title{ /* your css here */ }
Related
I need to use CSS to remove a horizontal line.
Here's the HTML:
<div id='page'>
<div id='header'>
</div>
<hr>
</div>
I tried using:
#page hr:first-child{display:none;}
But that doesn't work. I need to display other hr's so I can't just remove them all. I need to target just this one.
try this one
#page hr:first-of-type{display:none;}
this will hide the first hr that is a child of #page
Do it without :first-child (the first child of #page is #header)
#page > hr {display:none;}
<div id='page'>
<div id='header'>
</div>
<hr>
</div>
Note: The > isn't really necessary - it's just a bit more precise
Note: If there is more than one hr inside the same parent, you can use #page > hr:nth-of-type(x) {display:none;} , with x being the count for the hr inside the parent
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 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>
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.
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>