I have a h3 tag which is deeply nested as follows and can't amend the component that contains
this styling.
Instead since I only have 1 h3 within this nest, trying to target it and amend its padding.
But this is not working. Can I know what I am doing wrong? I am doing something similar for another
div tag targeting the 6th position for that div. That works fine. Issue is with targetting this h3
tag. Tried adding !important to these styling which makes no diff. What am I doing wrong here?
This is the structure of the html currently.
// This is the only div I created passing in my custom styling and the component is wrapped within this.
<div className={styles.main}>
// all the following is coming from an external component I can't amend.
<div>
<div>
<div>
<div>
<span>some span text 1</span>
<div>some span text 2</div> <!-- also targetting this div and this works fine. See CSS below -->
</div>
<div></div>
</div>
</div>
<div>
<div>
<div>
<h3> <!-- This is the only h3 in entire nest -->
Some Random Text <!-- trying to give this a left padding -->
</h3>
</div>
</div>
</div>
</div>
</div>
My SCSS File
.main > div:nth-child(5) {
padding-top: 100px; // this works fine
}
// tried all the following. None of them works. I do not get the padding left 50px;
// The text is stuck to the left with no margin / padding.
.main > h3 {
padding-left: 50px !important; // Don't want to use !important. Tried with it just in case it works.
}
.main > h3:first-of-type {
padding-left: 50px !important; // Don't want to use !important. Tried with it just in case it works.
}
.main > h3:first-child {
padding-left: 50px !important; // Don't want to use !important. Tried with it just in case it works.
}
The problem is that you are using the direct descendant selector.
You are only selecting h3 elements that are direct children of .main
You need to modify your selector to select children/grandchildren/etc.
.main h3 {
...
}
Related
I'm attaching a 3rd party component to a div element (container). This div element is inside a from and the form has the class cssform. my main css sheet I use contains the definition:
.cssform div {
max-width: 680px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px;
}
My container is now affected by this css which makes the 3rd party component visual unusable.
How can I "overwrite" or "reset" this above css so that it is not applied in any children of my container especially taking into account 3rd party component itself creates div elements below mine also affected from this forms css
EDIT:
The structure is
<form class="cssform">
<section>
<div>
<label></label><input>
</div>
<div id="container"></div>
<div>
<label></label><input>
</div>
<section>
</form>
I fixed this by simply giving all the divs except the container an addtional css class and using that to assign the forms style. that way my container is not affected. I'm not adding this as an answer because it's technical not an answer to my question but a work-around.
If you your div element is, lets say, the third child of its parent container, you can use the pseudo-class :not with :nth-child(3):
.cssform div:not(:nth-child(3)) {
max-width: 680px;
clear: left;
margin: 0;
padding: 5px 0 8px 0;
padding-left: 155px;
}
You may have to edit the selector depending on your entire block of code. But I believe the CSS selector you are looking for is :not(:nth-child(n)).
If you are trying to style only one particular div, the solution depends on which exact HTML structure you have. For example, if the form looks like
<form class="cssform">
<section>
<div>
<div> this one!
<div> but not this one! </div>
</div>
<div> nor this one! </div>
<div>
<section>
</form>
then the css needs to be like this:
.cssform > section > div > div:first-child {...}
Hope this helps.
Here is my HTML and CSS:
.wrapper > p:first-of-type {
margin-bottom: 20px;
}
<div class="wrapper">
<p>...</p>
<p>...</p>
</div>
However, the margin property is being applied to both elements. What's wrong?
It is not applied to the first element only, but the second element was not applied to it
And even if applied to it you did not notice that because the margin is down and the last element
There are two extra rules you can put into your CSS that will show you that your first-of-type selector is working correctly. Firstly, you can add
* {
margin: 0
}
Most browsers, by default, add a margin-top and margin-bottom to all <p> elements. If you do not explicitly eliminate this, sometimes called a CSS reset, it will always be used. getting rid of it allows you to see that only your top <p> element has a margin on the bottom.
If you still have trouble seeing this, you can add
p {
border: 1px solid green
}
Having a border will show you more clearly that the top paragraph has a margin and the bottom one does not. Add a third <p> for the result to stand out more starkly.
* {
margin: 0
}
.wrapper > p:first-of-type {
margin-bottom: 20px;
}
p {
border: 1px solid green
}
<div class="wrapper">
<p>...</p>
<p>...</p>
<p>...</p>
</div>
I have css rule as follows,
.wrapper > h3{
color:red;
}
The html code,
<div class='wrapper'>
<h3>Text1</h3>
</div>
<div class='wrapper'>
<div data-ui-view=''>
<h3>Text2</h3>
</div>
</div>
Here is the plunker. The Text1 is shown in red colour but Text2 is not. I understood that this rule
will take the immediate <h3> element under .wrapper. In angularjs most of the time the elements will be wrapped under tag. So, I want to make a rule such that whenever an <h3> tag comes inside .wrapper class then it has to be in red colour. irrespective of <h3>'s parent elements. Is there a way to do it?
Simply make the rule:
.wrapper h3 { color: red; }
This will make all <h3> elements within the .wrapper class red
If you did want to target the grandchild element as your question title suggests you could use this rule:
.wrapper > * > h3 { color: red; }
I'm trying to make a simple web page design with multiple divs. Each div should apply 1 or more external stylesheet from a list.
My problem is that, from the examples I've read so far, I'm not sure how to do this elegantly. It seems that external stylesheets are applied to the whole html file. So should I be looking at modularizing my divs into separate files? Or would something like iFrame be a neater solution?
Current Solution:
External CSS:
div.test1 {
color: purple;
background-color: #d8da3d
}
.test2 {
color: red;
background-color: #d8da3d
}
#test3{
color: green;
background-color: #d8da3d
}
HTML body code:
<div class="test1">
<p> Style1
</div>
<div class="test2">
<p> Style2
</div>
<div id="test3">
<p> Style3
</div>
My references:
Div with external stylesheet?
http://www.htmlhelp.com/reference/css/style-html.html
- 1
Take a look at this:
https://stackoverflow.com/a/17668004/1552518
- 2
Or just add a class to each div:
<div id="container">
<div class='div1'>
style1
</div>
<div class='div2'>
Style2
</div>
</div>
And in your external css:
.div1 {
// Style applied only to the first div
}
.div2 {
// Style applied only to the second div
}
- 3
Or if you can't add a class to the divs use this in css:
#container > div:first-child {
// Style applied only to the first div
}
#container > div:last-child {
// Style applied only to the second div
}
Are you just trying to style the div's differently? Have you looked into using a class for each of the divs?
From the second link you provided: http://www.htmlhelp.com/reference/css/style-html.html#class
When you use the css styling:
body{
color:purple;
background-color: #d8da3d
}
You are saying that you want to style the entire body of the document with the styling you have set.
In order to target specific elements you should give those elements an id or class.
For example:
<div id="test1"></div>
<div class="testing"></div>
<div class="testing"></div>
Please note that when using and id you must make sure to give the element a unique id. However many elements can share the same class. Therefore for the above example the styling:
#test1{
color:blue;
background-color:black;
}
.testing{
color:red;
background-color:white;
}
Will apply the first style (test1) to the div with the same id, and the second style (testing) to the two divs with the same class.
I cannot hide a H2 element inside a DIV using CSS, please help me.. Heres the CSS:
<style>
#block-views-projects-block h2 {
visibility:hidden;
}
</style>
And heres the actual html code
<div class="region region-projects">
<div id="block-views-projects-block" class="block block-views contextual-links-region">
<h2>PROJECTS</h2>
</div>
</div>
Can you give me the correct CSS to remove this H2 PROJECTS , I cannot remove it as it is produced automatically. Note: the DIV's from this code has a different css ID's and CLASS.
Try this
#block-views-projects-block h2 {
display: none;
}
if this doesn't work, then can you try this
#block-views-projects-block h2 {
display: none !important;
}