I have some HTML like this.
<div class="platform-content">
<div class="content-wrapper">
<section class="entry">
<article class="post-type-page id123 page type-page status-private hentry" id="id123">
<section class="entry-header">
<h2 class="entry-title">Heading Text</h2>
</section>
I need to target just that one h2 element in order to change its color with css. I've tried doing the following.
#id123 h2 {
color: red;
}
It works, except every h2 on the page changes to red. I also can't just target h2 directly either as then it affects other pages as well. I can't seam to figure out how to target just that one specific h2 on that page only and not every one of them on the page.
Further down the page I have some form fields that have h2 elements in them like this. I don't want these to change to red.
<li id='field_18_75' class='gfield gsection field_sublabel_below field_description_below gfield_visibility_visible'>
<h2 class='gsection_title'>Title Text</h2>
</li>
The trouble is, all of this html is generated and I don't have any control over that. So I can't add a custom id to the element for example.
You should be able to capture only the elements with nth-child(n)
#id123 section h2:nth-child(1) {
color: orange;
}
<div class="content-wrapper">
<section class="entry">
<article class="post-type-page id123 page type-page status-private hentry" id="id123">
<section class="entry-header">
<h2 class="entry-title">Heading Text</h2><h2 class="entry-title">Heading Text</h2>
</section>
</article>
</section>
</div>
If you want a particular tag to be of red color, then give it a unique id and then set it's color as red.
#uniqueId {
color : red
}
<h2 id = "uniqueId">Heading Text</h2>
Give id to that particular h2 element:
<h2 class="entry-title" id="my-id">Heading Text</h2>
then in css:
#my-id {
color: red;
}
<h2 id="idA" class="entry-title">Heading Text</h2>
Put specific id on h2 tag.
#idA{
color : red
}
Use :nth-child for achieve this.. Like this check my answer..
.entry-header h2:nth-child(1){
color:red;
}
.entry-header h2:nth-child(2){
color:blue
}
.entry-header h2:nth-child(3){
color:yellow
}
<div class="platform-content">
<div class="content-wrapper">
<section class="entry">
<article class="post-type-page id123 page type-page status-private hentry" id="id123">
<section class="entry-header">
<h2 class="entry-title">Heading Text1</h2>
<h2 class="entry-title">Heading Text2</h2>
<h2 class="entry-title">Heading Text3</h2>
<h2 class="entry-title">Heading Text4</h2>
</section>
David Angulo - If entry-title is unique then you can use #id123 h2.entry-title instead.
Since you specified an id on the <h2> element, the code you specified should work. Keep in mind that ids on each page should be unique so the CSS instruction #id123 h2 { color: red; } should affect only the <h2 id="id123"></h2> element.
Example:
h2 {
color: blue;
}
#id123 h2 {
color: red;
}
<div class="platform-content">
<div class="content-wrapper">
<section class="entry">
<article class="post-type-page id123 page type-page status-private hentry" id="id123">
<section class="entry-header">
<h2 class="entry-title">Heading Text</h2>
</section>
</article
</section>
</div>
</div>
<div class="platform-content">
<div class="content-wrapper">
<section class="entry">
<article class="post-type-page id123 page type-page status-private hentry" id="id124">
<section class="entry-header">
<h2 class="entry-title">Heading Text</h2>
</section>
</article
</section>
</div>
</div>
Related
creating a basic image card and i need to adjust the size of the headers the first header needs to be 22px and the second needs to be 11px.
im new to html so i really dont know where to go from the code i have built., Im using visual studio code to write my command line.
<!--cards -->
<div class="card">
<div class="image">
<img src="https://freedesignfile.com/upload/2018/02/People-in-the-desert-experience-camel-travel-Stock-Photo-01.jpg" alt="a man in the desert" width=4 0px; height=192px>
</div>
<div class="title">
<h1>
Title goes here </h1>
<h2>
Secondary text</h2>
</div>
<div class="des">
<p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
</div>
<!--cards -->
That's were css is used:
h1 {
font-size: 22px;
}
h2 {
font-size: 11px;
}
<div class="card">
<div class="image">
<img src="https://freedesignfile.com/upload/2018/02/People-in-the-desert-experience-camel-travel-Stock-Photo-01.jpg" alt="a man in the desert" width=40px; height=192px>
</div>
<div class="title">
<h1>Title goes here</h1>
<h2>Secondary text</h2>
</div>
<div class="des">
<p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
</div>
</div>
Use font-size
<!--cards -->
<div class="card">
<div class="image">
<img src="https://freedesignfile.com/upload/2018/02/People-in-the-desert-experience-camel-travel-Stock-Photo-01.jpg" alt="a man in the desert" width= 40px; height=192px>
</div>
<div class="title">
<h1 style="font-size:22px;">
Title goes here </h1>
<h2 style="font-size:11px;">
Secondary text</h2>
</div>
<div class="des">
<p>Greyhound divisively hello coldly wonderfully marginally far upon excluding.</p>
</div>
<!--cards -->
You can only achieve it by using CSS...
There are 3 ways of adding your style sheet as you can review here:
https://www.w3schools.com/css/css_howto.asp
in your case the CSS property will be helpful for you is font-size property. And the html elements you want to manipulate is : h1 and h2;
safest way to do it as a beginner in my opinion adding the css file inside of your html head tag with a style tag like this:
h1 { font-size:22px; } h2 { font-size:11px; }
<h1>
Title goes here </h1>
<h2>
Secondary text</h2>
Greyhound divisively hello coldly wonderfully marginally far upon excluding.
I'm trying to target the class, .textbox-fill to change the background colour and text colour for each individual box element. For example .textbox-fill's first-child should be grey. The second-child should be white. The third child I want to adjust the height slight and so on.
I have tried using the nth-child selector #About-Container .about-inner-content article:nth-child(1n+2) .textbox-fill nothing seems to work. Example here
<article class="col-sm-6 grid-tile">
<div class="textbox-fill">
<div class="about-textbox">
<h2>Some text</h2>
<p>Some text</p>
</div>
</div>
</article>
I have encounter this issue in the past and I'm not 100% sure how I resolved it. I have read several articles and posts on this subject. I understand the basics, however something more complex like this I always approached with trial and error method.
Does anyone know how I can solve this issue?
Since your .textbox-fill is inside the article, it is the article you need to start with, as target the text-fill using nth-child will not work as it can't see outside its parent
So do like this instead
article:nth-child(1) .textbox-fill {
color: red;
}
article:nth-child(2) .textbox-fill {
color: lime;
}
article:nth-child(3) .textbox-fill {
color: blue;
}
<article class="col-sm-6 grid-tile">
<div class="textbox-fill">
<div class="about-textbox">
<h2>Some text</h2>
<p>Some text</p>
</div>
</div>
</article>
<article class="col-sm-6 grid-tile">
<div class="textbox-fill">
<div class="about-textbox">
<h2>Some text</h2>
<p>Some text</p>
</div>
</div>
</article>
<article class="col-sm-6 grid-tile">
<div class="textbox-fill">
<div class="about-textbox">
<h2>Some text</h2>
<p>Some text</p>
</div>
</div>
</article>
If we talk about the .textbox-fill's .about-textbox's children, the h2 and p, do like this, where you use the global selector * in *:nth-child, as the children is of different types
.textbox-fill .about-textbox *:nth-child(1) {
color: red;
}
.textbox-fill .about-textbox *:nth-child(2) {
color: lime;
}
<article class="col-sm-6 grid-tile">
<div class="textbox-fill">
<div class="about-textbox">
<h2>Some text</h2>
<p>Some text</p>
</div>
</div>
</article>
If you have a .textbox-fill with several children, like:
div.textbox-fill
h1#header
div#firstDiv
div#secondDiv
article#someArticle
div#thirdDiv
Now, .textbox-fill div:first-child will target nothing, because there isn't any div that is a first child of it's parent (.textbox-fill). Although .textbox-fill div:first-of-type will target div#firstDiv. .textbox-fill div:nth-child(2) will also target div#firstDiv. div#thirdDiv will be .textbox-fill div:nth-of-type(3) or .textbox-fill div:nth-child(5) or .textbox-fill div:last-child or .textbox-fill div:last-of-type.
If you want to target specific .textbox-fill located on site, but with different parents, like:
div.something
div.textbox-fill
[...]
article#other
div.textbox-fill
You cannot target it using nth-child nor nth-of-type. You will need to find another way based on your site tree.
I got the following:
<section id="work">
<div class="project">
<h1>something</h1>
<h2>something</h2>
</div>
<div class="project">
<h1>something</h1>
<h2>something</h2>
</div>
<div class="project">
<h1>something</h1>
<h2>something</h2>
</div>
<div class="project">
<h1>something</h1>
<h2>something</h2>
</div>
</section>
What I want to do, is to change font size property for every second h1 header. I thought section#work .project h1:nth-child(even) would work, but this changes font size for all h1 headers. Any idea what I am doing wrong?
Is it this that you want to achieve?
https://fiddle.jshell.net/143fvztm/1/
div.project:nth-child(even) h1 {
font-size:36px;
}
I have the following fiddle in which it works by hovering over a class,however I have not managed to make it work when surrounded by tags. How can I make it work
Thanks in Advance
<section class="section1">
<div class="ButtonChange">
Hover Here
</div>
</section>
<section class="section2">
<div class="changecolor">
Text Sample
</div>
</section>
<div class="ButtonChange2">
Hover Here 2
</div>
<div class="changecolor2">
Text Sample 2
</div>
http://jsfiddle.net/Jhonc66/380k4m7g/
Try this:
.section1:hover ~ .section2 .changecolor {
color:red;
}
I'm currently using Customizr theme, with the default settings for the pages set to "full width / no sidebars".
However, when I try do do something like this within a page :
<div id="blue-background">
<h1 style="text-align: center;">Full width text with background color ? >/h1>
</div>
with the corresponding CSS code :
#blue-background{
width: 100%;
float: left;
padding: 20px;
background: #2680BE;
position: relative;
}
I still have white margins around my text. Increasing the width doesn't seem to be a good solution, so how can I do ?
here is an example of what I get with this code:
http://www.cirnu.com/bandeau/
Your main-wrapper should look like this
<div id="main-wrapper">
<div class="tc-hot-crumble container" role="navigation"><div class="row"><div class="span12"><div class="breadcrumb-trail breadcrumbs" itemprop="breadcrumb"><span class="trail-begin">Accueil</span> <span class="sep">ยป</span> <span class="trail-end">Bandeau</span></div></div></div></div>
<div role="main">
<div class="row column-content-wrapper">
<div id="content" class="span12 article-container">
<article id="page-623" class="post-623 page type-page status-publish hentry row-fluid">
<header class="entry-header">
<h1 class="entry-title format-icon">Bandeau</h1>
<hr class="featurette-divider __before_content">
</header>
<div class="entry-content">
<div role="main">
<div id="blue-background">
<div class="container">
<h1 style="text-align: center;">Full width text with background color ?</h1>
</div>
</div>
</div>
</div>
</article>
</div><!--.article-container -->
</div><!--.row -->
</div><!-- .container role: main -->
</div>
Then you'll need to change some CSS rules:
#blue-background {
padding:20px 0;
/* then all the other rules you already have */
}
.article-container {
width:100%;
}