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
}
Related
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">
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 6 years ago.
I have this markup:
<div class="container page-content">
</div>
normally the class page-content has a padding:
.container.page-content{
padding-top: 160px;
}
But at a specific page there is a class "item-pagehome" inside my div:
<div class="container page-content">
<div class="item-pagehome">
Some Content ...
</div>
</div>
And in this special case I want to disable the padding-top of the .page-content. But how can I do this?
I try to select:
.page-content:has(> .item-pagehome){
padding-top: 0px;
}
But this does not working ...
How can I select a div only when it is a specific child class, in this
case .item-pagehome?
.container.page-content .item-pagehome {
margin-top: -160px;
}
It cannot be done using CSS.
CSS is Cascading Style Sheet (cascading: from top to bottom). You can only effect the last element in the CSS selector.
The condition you are looking for can be done using JavaScript, but this is outside the scope of your question.
How to organize the HTML structure and apply CSS. Which does not conflict with others CSS.
Which is the better way to apply the CSS to the targeted element?
Way 1:
.PARENT_1 .CHILD:first-child {
}
<div class="PARENT_1">
<div class="COMMON">
<div class="CHILD"></div> <!-- Targeted element -->
<div class="CHILD"></div>
</div>
</div>
Way 2:
.PARENT_1_CHILD_1 {
}
<div class="PARENT_1">
<div class="COMMON">
<div class="CHILD PARENT_1_CHILD_1"></div> <!-- Targeted element -->
<div class="CHILD"></div>
</div>
</div>
Any other way to improve CSS Specificity?
Can I use Bem Methodology?
If you want to apply CSS only to one element at a time, use an id for the element e.g.
if you target only one element wrapped inside a div, you can write it down in css like this: #divname > #something.a (when #something.a is first element inside the wrapper div) OR**
simply #divname #something.a - this will find the element with id anywhere inside the wrapper div.
Hope you got the point. :)
Here are css Methodologies you can find a depth explanation:
Examples of CSS Methodologies:
OOCSS, SMACSS, Idiomatic CSS and BEM
Title CSS Simple Approach CSS Class Naming
This question already has answers here:
How to select a text node with CSS
(6 answers)
Closed 8 years ago.
In the following HTML is it possible to affect "First Text", eg, giving it a margin, or a width, without affecting the second and third elements.
<div id="first">
First Text
<div id="second">Second Text</div>
<span id="third">Third Text</span>
</div>
margin and width never have the value inherit by default, but the size of a container is going to influence the rendering of its children (simply because of where word wrapping will occur).
Don't mix up your code with container and content elements. This way you won't be able to do it like you're willing to, like APAD1 said.
Instead, use container elements and for each content element a new child node. That way, you can access single child elements with the first-child selector.
This works for me:
<div id="highlight">
<div id="first">First Text</div>
<div id="second">Second Text</div>
<div id="third">Third Text</div>
</div>
CSS:
div#highlight div:first-child{margin:10px;color:red}
Working example here: http://jsfiddle.net/B5Ej9/
Update: TL;DR: It isn't possible to do so with the given HTML without any ugly hack!
If there is no chance to change the HTML, you will need some kind of hack to workaround, as (like Quentin) answered, all the child objects automatically inherit width and margin from parent objects in DOM. The following example might work for some indentation on the left margin of the div, but I know: It's an ugly workaround that should just clarify what I mean (and why you might consider getting the HTML to be changed). Here you go, with your original HTML:
<div id="first">
First Text
<div id="second">Second Text</div>
<span id="third">Third Text</span>
</div>
And the workaround CSS:
div#first { margin: 20px; color: red; background: grey;}
div#first *:not(:root) { margin-left: -20px; color: blue}
That way, you will add a margin to the first div and inherit it to all the childs (second and third), but everything that is not inside the root will be set to a negative margin on the left. But have a look at the background (http://jsfiddle.net/vag58/), you will notice that the background of all child elements is still inherited and you're never ever gonna change that.
If 'second' and 'third' absolutely need to be children of 'first', then you may use an external style sheet for 'first' and inline style for 'second' and 'third'.
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 */);