This question already has answers here:
Can I use camelCase in CSS class names
(4 answers)
Closed 5 years ago.
I seem to be having re-occurring issues with styling individual parts of a wordpress page, but in this case it is the footer HTML code.
In the Footer, I have the following code:
<div id="Footer Shopping Info">
<div class="Box">
<div class="Box-Info">
<div class="Box-Heading">
<ul class="Shopping-Info-List">
<h2>Shopping Info</h2>
<li>Returns</li>
<li>Expected Delivery </li>
</ul>
</div>
</div>
</div>
</div>
I want to be able to individually style and change
H2 with the following code:
.box h2 {
color: #ff63b1;
}
but the H2 line is not turning pink. Why is this?
I seemed to be having this alot lately, and I know that
its pulling from a global element. How can I box off
code so that I can change things individually?
Dear .box is not the same as .Box these are two different classes when using css it is always best practice to use small letters.
so just change <div class="Box"> to <div class="box">
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
How to affect other elements when one element is hovered
(9 answers)
Closed 2 years ago.
I should say on the outset that I am not familiar with Javascript, so a solution involving HTML or CSS if possible would be really helpful!
The site I am building uses something very similar to the hover-to-show effect shown here.
It works just fine, until there comes a situation where I need to separate the two divs further by another div;
i.e.; going from this:
<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when someone hovers over the div above.</div>
to this:
<div>
<div class="myDIV">Hover over me.</div>
</div>
<div class="hide">I am shown when someone hovers over the div above.</div>
That's not possible with just CSS unless you can apply the CSS to the newly created parent
.hide {
display: none;
}
.newlycreatedparent:hover+div.hide {
display: inline-block;
}
<div class="newlycreatedparent">
<div>Hover over me.</div>
</div>
<div class="hide">I am shown when someone hovers over the div above.</div>
I'm absolutely new to coding and attempting a basic website, and have used the BootStrap CSS as a basis.
I've set up nav-pills and managed to customise them thus far (spacing, font, background colours etc) but struggled for hours trying to change the background colour of my header behind the nav-pills - 1 white b/g to 2 grey b/g.
My HTML header container reads:
<div class="header">
<div class="row">
<p id="navigator">
[nav-pills code]
</>
</div>
</div>
With a lot of researching into specificity I thought this may be my problem so I tried CSS code:
.header .row #navigator {
background-color: #CCCDD9;
}
to no avail, but found that simply did work:
.header .row {
background-color: #CCCDD9;
}
now produced the desired override of the bootstrap CSS even though I was not even selecting the #navigator ID to increase rule specifity. Could someone explain why this method works?
Further, as the new background does not appear for the other website pages I did not add the #navigator header ID to, is there a method (besides adding the #navigator ID to each HTML page) of modifying my CSS which would make this override work across all pages?
In your first CSS example, you are targeting the paragraph tag within the row, but in the HTML you provided your paragraph tag is malformed (missing a closure and contains no content). Because of this, the paragraph tag is being rendered with 0 height which explains why you don't see the background color. If you add content to the paragraph tag and you add a closure, it will work with the first bit of CSS you posted.
In other words, this is not a specificity issue.
<div class="header">
<div class="row">
<div class="col-sm-12">
<p id="navigator">Testing</p>
</div>
</div>
</div>
Bootply Example
After re-reading your question, I don't think you should be using a paragraph tag at all. It looks like you were trying to use it as a container for the pills, but you should be using either an unordered list (like in the Bootstrap docs example or a div). Here's some sample code:
HTML:
<div class="header">
<div class="row">
<div class="col-sm-12">
<ul class="nav nav-pills">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
</div>
</div>
</div>
CSS:
.nav-pills {
background-color: #CCCDD9;
}
Bootply
So, I have a collection of div as following for My Page.
<div class="My_Page">
<div class="one">
<div class="two">
Hi
</div>
</div>
</div>
Then I have another page with same class= one and two.
<div class="Your_Page">
<div class="one">
<div class="two">
Hi
</div>
</div>
</div>
However, I am trying to apply different css to class= one and two based on what page they are in.
For example:
My_page:
.My_Page .one{width:100%;}
Your_Page:
.Your_Page .one{width:50%}
I have one css file which contains both codes.
For either pages, these two css markups are loaded and I feel like there must be more efficient ways to apply different css based on what parental div it is in.
Or am I doing it right?
Thanks
.page{ .... //common css for both page one and two}
.page .one{ width:100% .... //common for both }
.page .two{ .... //common for both }
.My_page .two{ width:50%;}
<div class="page My_page">
<div class="one">
<div class="two">
Hi
</div>
</div>
</div>
You are doing it correctly, CSS is very lightweight and loading unused code is not overly bad. However if you feel the need to do so you could load page specific CSS files and then have a whole site file that is loaded for all pages.
You are doing it correctly -
.outerclass .innerclass { }
will apply the style changes to all instances of this specific scenario.
Since your outer div has a different class, you could use a child selector to do something like this:
.My_Page .one {
color: red;
}
.Your_Page .one {
color: blue;
}
In that example, elements with the class one would only be red if they were inside a parent element with a class of My_Page.
Edit after re-reading the question:
Now I see that you seem to already be doing this. Yes, that is fine. You're doing it right. You could also include a different style sheet on each page if you're very concerned about the size of the style sheet. But that's not really necessary in most cases.
This question already has answers here:
How do I prevent CSS inheritance?
(13 answers)
Closed 6 years ago.
I would like to include a big <div> inside the <div class="jumbotron"> as seen below, but it should not inherent the CSS styles from the parents.
<div class="container">
<div class="jumbotron">
HTML chunk here that should not inherent from parents
</div>
</div>
Here is the big html chunk that is rendered correctly and here when it have been included in the Bootstrap template, where the font sizes and more are messed up.
Question
Is it possible to include the html chunk with it inherent any CSS styles from the parents?
Some ways to work with or prevent CSS inheritance:
The most obvious way would be to remove the jumbotron css and write your own.
Secondly, you could try to change the CSS to be more specific. For example using advanced css selectors IE: .jumbotron > .childClass. Or stuff like + :not() :first-child :last-child (and others). Depends on your use case. See advanced selectors.
Or if you don't want to modify or change the CSS of the parent class. Then another option would be to override it with a higher parent. For example...
<div class="jumboTronParent">
<div class="container">
<div class="jumbotron">
<div class="myChildClass"></div>
</div>
</div>
</div>
.jumboTronParent .jumbotron > .myChildClass {
font-size:1em;
// applies font style to just first level children with this class
}
.jumboTronParent .jumbotron .myChildClass {
font-size:1em;
// applies font style to all children with class
}
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 9 years ago.
I have the following HTML
<div id"mainDiv">
<ul id="cat1">
</ul>
</div>
<div id"mainDiv">
<ul id="cat2">
</ul>
</div>
I would like to select the "mainDiv" which has a child ul "cat1", in my CSS as I want to apply some styling on that div. But not the all maindiv's
Any ideas?
Your markup is invalid:
<div id"mainDiv">
should be
<div id="mainDiv">
Since duplicate ID's are invalid in HTML, your question is really invalid in this context.
You should either use a class OR rethink your structure.
Example for the first div:
<div class="mainDiv firstdiv">
and subsequent divs:
<div class="mainDiv">
CSS:
.firstdif{}
put your CSS in that.
No CSS selector for this currently, so you're going to have to resort to some JavaScript/jQuery:
$('#cat2').parent().css(/* add it here */);