I have a html page setup like so
<div class="row row-venue">
<div class="col-sm-12">
<h3>Venue 1</h3>
</div>
</div>
<div class="row row-venue">
<div class="col-sm-12">
<h3>Venue 2</h3>
</div>
</div>
All I want to do is make every odd h3 a different colour to every even. I have tried with the code below
div.row-venue div.col-venue h3:nth-of-type(odd){
color:white;
}
div.row-venue div.col-venue h3:nth-of-type(even){
color:black;
}
and even just tried
h3:nth-of-type(odd){
color:white;
}
h3:nth-of-type(even){
color:black;
}
I just cant seem to get my head around it, any help would be appreciated
<h3> is always the first child of <div class="col-sm-12">. Because the counting is zero base - first child = even, so the even rule that you defined applies to all <h3> elements.
To get what you ask, you need to find the nth child between the <div class="row row-venue"> items:
.row-venue:nth-child(odd) h3 {
color: white;
}
.row-venue:nth-child(even) h3 {
color: black;
}
If your divs are mixed with other elements, use :nth-of-type instead of :nth-child.
Your CSS is targeting odd/even <h3> tags within a .col-venue element, which I don't see in your markup. Even if .col-venue was in your markup It would only be targeting H3s within it - example here.
You need to control the styling from a higher level in the markup, see below.
<div class="row row-venue">
<div class="col-sm-12">
<h3>Venue 1</h3>
</div>
</div>
<div class="row row-venue">
<div class="col-sm-12">
<h3>Venue 2</h3>
</div>
</div>
.row-venue:nth-of-type(odd) h3 {
color: red;
}
.row-venue:nth-of-type(even) h3 {
color: black;
}
http://jsfiddle.net/Lvezzrnq/
With the above CSS selectors you are targeting odd and even .row-venue elements and then drilling down to the h3.
Related
I have a below div structure and I want to add css on first .column element, not its sibling
<div class="row" id="team">
<div class="column">
<div class="row">
<div class="column">
A
</div>
<div class="column">
B
</div>
<div class="column">
C
</div>
</div>
</div>
</div>
I want to add CSS only first .column that comes just after #team div. So how can I select a class for that .column not for the inner .column?
You would use the direct descendant / child combinator ">" which in effect says - target the .column class that DIRECTLY descends from the #team parent div.
In the following - I am placing a border around the targetted .column div and not around the nested children .column divs.
and if there are other divs that are siblings of that particvular div - then you could use the :first-child pseudo selector as well..
#team > .column:first-child {...}
which says - target the .column div that is a direct descendant AND the first child of the #team div.
#team > .column {
border: solid 1px red;
}
<div class="row" id="team">
<div class="column">
<div class="row">
<div class="column">
A
</div>
<div class="column">
B
</div>
<div class="column">
C
</div>
</div>
</div>
</div>
The most specific selector in this case is #team>.column, with > between parent and child to make sure the nested divs which also have the .column class are not affected.
#team .column would not work in this case, since it also selects the .column divs which are nested in lower instances.
BTW: You mention "siblings", which is a bit confusing, since there are not any siblings to that element...
#team>.column {
background: yellow;
}
<div class="row" id="team">
<div class="column">
<div class="row">
<div class="column">
A
</div>
<div class="column">
B
</div>
<div class="column">
C
</div>
</div>
</div>
</div>
Ok, so I think you may have confused your HTML 'parent/child' structure.
You could use
#team > .column:first-child {
}
However, I don't know if you are aware that you can add any number of classes to HTML elements. You could have many classes to easily distinguish between your components and to be able to grab hold of them with CSS or JS.
For the sake of ease, you could just add another class to the element you want to add another separate class style, as I have below.
Then you could just add CSS styling for that class.
<div class="row" id="team"> //this is parent
<div class="column main"> // a child that I've added the
// class of .main to
<div class="row"> // a grandchild
<div class="column"> // then great grandchildren
A //these are siblings
</div>
<div class="column"> //these are siblings
B
</div>
<div class="column"> //these are siblings
C
</div>
</div>
</div>
</div>
/*Then you would just add stylings for*/
.main {
}
Suppose I have a header inside <div> with a certain class and I don't want a certain effect to apply to them, how do I exclude them with CSS?
Below the code:
h2:not(.article) {
font-size: 25px;
}
<div class="article">
<h2>Title<h2>
</div>
But it still doesn't work and the <h2> inside .article div is still getting affected.
The <h2> isn't closed properly. The :not() pseudo class is backwards. Below is an example of how to use it.
.article {
font-size: 25px;
}
:not(.article)>h2 {
font-size: 12px;
}
<div class="article">
<h2>Title 1</h2>
</div>
<div>
<h2>Title 2</h2>
</div>
Html:
<footer id="colophon"
class="site-footer footer
bg-dark" role="contentinfo">
<div class="container
footer-inner">
<div class="row">
<div class="footer-widget-
area"><div class="col-md-3
col-sm-6 footer-widget"
role="complementary">
<div id="text-4"
class="widget widget_text">
<div class="textwidget"><p>.
<a href="http://4309.co.uk/
contact/">Contact</a></p>
</div>
</div></div>
Tried css:
.page-id-3748>.site-
footer{position:relative
!important;top: 100px!
important;}
Trying to target footer on one page only. I know the selector is site-footer but I'm trying to do it with specificity.
Try to remove the ">" sign inside your CSS.
.page-id-3748 .site-footer {
position:relative !important;
top: 100px! important;
}
Use !important only if nothing else will work.
Because an id has an higher priority you can use
.page-id-3748 #colophon { }
or combining 2 class selectors will also give you more priority.
.page-id-3748 .site-footer.footer { }
or use tags to give it more priority
.page-id-3748 footer.site-footer { }
If you have used the !important elsewhere on site-footer, then nothing here will work. Also if you have overruled the .site-footer on aother place in your styling this will not wordk.
Please see the following html code:
<div class="container">
<div class="sidebar-column">
<h2 class="title">Column 01</h2>
<p>content01</p>
<p>content02</p>
<p>content03</p>
</div>
<div class="sidebar-column">
<h2 class="title">Column 02</h2>
<p>content04</p>
<p>content05</p>
<p>content06</p>
</div>
</div>
I'd like to select only the second title with content "Column 02" is there anyway to do that using only CSS?
I've tried many way including select the headline "h2" of the second child class "sidebar-column" but doesn't work:
<style>
div.sidebar-column:nth-child(2) > h2.title {
background-color: red;
}
</style>
After adding style "background-color: red", the second "h2" is supposed to change background color to red, but nothing happen.
and idea? Thanks!
Edit: I've found out how to fix the issue. Just remove the ">". The css now become:
<style>
div.sidebar-column:nth-child(2) h2.title {
background-color: red;
}
</style>
Now it's worked in Wordpress addition CSS. But I still don't know why.
There are 2 ways of doing it.
SOLUTION 1- make one more css class (eg-class2) and add both the classes to the second h2 element.
<div class="container">
<div class="sidebar-column">
<h2 class="title">Column 01</h2>
<p>content01</p>
<p>content02</p>
<p>content03</p>
</div>
<div class="sidebar-column">
<h2 class="title class2">Column 02</h2>
<p>content04</p>
<p>content05</p>
<p>content06</p>
</div>
</div>
The second class will contain the code-
<style>
.class2{
background-color: red;
}
</style>
SOLUTION 2- Or if you just want to add red background color to Column 02,you can write the inline CSS code
<div class="container">
<div class="sidebar-column">
<h2 class="title">Column 01</h2>
<p>content01</p>
<p>content02</p>
<p>content03</p>
</div>
<div class="sidebar-column">
<h2 class="title" style="background-color:red;">Column 02</h2>
<p>content04</p>
<p>content05</p>
<p>content06</p>
</div>
</div>
Best way is just add an data-attribute to your template and select with that data-attribute in css.
working http://jsfiddle.net/Ls8EP/65/ link
I would like to have something along the lines of (the bordered thing is a a picture and text has inverse coloring so that it is easy to read)
Mind you the image is a simple div tag that is going to live in
<div class = "row">
<div class = "col-md-6">
<h3>Title</h3>
<p>
Short and nice paragraph
</p>
</div>
</div>
However I do not know a first thing of where to start from. I tried reading bootstrap tutorials and they didn't provide much. I understand that I haven't provided any piece of code to show my work, but I honestly do not even know where to start, or what to search for or what to do. So I am not really asking for a full solution or anything, but if you could point me in right direction I will be ever so grateful
here you go
.col-md-6{
width:50%;
}
.image{
position:relative;
}
.image img{
width: 300px;
}
.text{
position:absolute;
top: 50%;
left: 0;
padding: 0 25px;
background: rgba(255,255,255,.6);
}
.text h3, .text p{
color:#f63;
}
<div class="row">
<div class="col-md-6">
<div class="image">
<div class="text"><h3>Title</h3>
<p>
Short and nice paragraph
</p>
</div>
<img src="https://i.pinimg.com/736x/51/d6/e3/51d6e3dcccd3bdac300202a5a3e99de0--pretty-cats-beautiful-cats.jpg">
</div>
</div>
</div>
Quillion, I don't understand what your question is. The code above should render almost what you want. Nevertheless maybe this helps you:
I wrapped your code in a main container .container-fluid and in a .card element, both can be found in the bootstrap documentation.
I just added one additional style for a wider border. You can play with it a little and should be quickly get the style you need. Here is a link to the pen: https://codepen.io/scheinercc/pen/pdwdvx
Hope that helps.
<style>
.custom-border-width-3 {
border-width: 3px;
}
<style>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="card mt-2 custom-border-width-3">
<div class="card-body">
<h1>Title</h1>
<p>
Short and nice paragraph
</p>
</div>
</div>
</div>
</div>
</div>