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.
Related
I am currently building a todo app, and from react, I am using CSS to custom my todo items' margin!
The problem is, I only needed the first element to have a margin-top of 110px. Here's what it'll look like when I apply it to every item - link
It's that the todolist items are too separated!
But if I removed the margin of 110px, the item is behind the textbox!
link
Is there a way to change the property of first item? I can delete the margin-top: 110px from the css file, and change the 1st item using JS. My planned function -
function addTodo() {
setList([...list, value]);
const firstItem = list.findIndex(0);
}
Thanks!
:first-of-type selector in CSS allows you to target the first occurence of an element within its container. Also, another option might be to select first child of the element, you can use :first-child pseudo-class.
There are several possibilities to solve this problem. I think the simplest one is to just build a container that contains all list items, and set it's padding-top or margin-top to 110px. The result could look like this:
.frame {
margin-left: auto;
margin-right: auto;
padding: 10px;
width: 200px;
border: 1px solid #000;
text-align: center;
}
.control-button {
position: absolute;
}
/* this is the container that holds all your items */
.items-container {
margin-top: 40px; /* in your case, it should be 110px */
}
.item {
margin-top: 10px;
border: 1px solid #000;
}
<html>
<body>
<div class="frame">
<div class="control-button">
<u>add item</u>
</div>
<!-- this is the important part, the container with the items -->
<div class="items-container">
<div class="item">
This is an item.
</div>
<div class="item">
This is another item.
</div>
</div>
</div>
</body>
</html>
I think this solution is the most simple and flexible one. You can easily add left, right or bottom margins too and you don't have to worry about which items it affects.
The simplest solution you can go with is using the :nth-child(n) pseudo class in CSS or :first-of-type.
Try this code:
.item:nth-child(1) {
margin-top: 110px;
}
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 {
...
}
Example page
The bottom right div containing "Student Visas" I thought would be affected by CSS:
.front-page-widget-portrait2:nth-of-type(2) .second-half {
height: 240px;
color: #FFF;
padding: 40.28436018% 40px 0 40px;
position: relative;
}
.front-page-widget-portrait2:nth-of-type(2) .second-half img {
position: absolute;
bottom: 0;
width: 49px;
margin: 0 auto;
display: inline-block;
}
It is contained in the 2nd div of class front-page-widget-portrait2, but .front-page-widget-portrait2:nth-of-type(2) is not being applied.
Can you see why not? Help appreciated.
Your markup is something like this
<div></div> <!-- Some more div elements around on the same level -->
<div class="front-page-widget-portrait2"></div>
<div class="front-page-widget-portrait2"></div>
<div></div> <!-- Some more div elements around on the same level -->
Instead of this, try wrapping your front-page-widget-portrait2 inside another div like
<div></div> <!-- Some more div elements around on the same level -->
<div class="front-page-widgets">
<div class="front-page-widget-portrait2"></div>
<div class="front-page-widget-portrait2"></div>
</div>
<div></div> <!-- Some more div elements around on the same level -->
Now, you can use a selector like
.front-page-widgets > div:nth-of-type(2) .second-half {
/* Styles goes here */
}
Let me break down the selector to explain to you how it works. We first select the wrapper element that is front-page-widgets (we just created a new one). Moving further, we use > which selects immediate children to wrapper element i.e div with a class of front-page-widget-portrait2. But as I already mentioned that nth- won't respect classes, so using it in the selector makes no sense. Lastly I use .second-half which selects the second block in your second widget.
I have a clear floats problem I can't figure out. This is the HTML code:
<div id="main">
<div id="primary">
<div id="content" role="main">
</div><!-- #content -->
</div><!-- #primary -->
<div id="secondary">
<div><!-- #secondary -->
</div><!-- #main -->
This is the CSS for each element:
#main {
clear: both;
}
#primary {
float: left;
width: 100%;
margin: 0 -40% 0 0!important;
}
#content {
background: none repeat scroll 0 0 white;
box-shadow: 0px 10px 10px 2px #888;
float: left;
margin: 0 12.3%!important;
position: relative;
width: auto;
}
#secondary {
float: right;
margin-right: 15%;
width: 22%;
position: relative;
padding-top: 170px;
}
The website is build on wordpress so main starts in header.php and ends in footer.php. The primary and content divs start and end in each page template and the secondary div is called in each page template (get sidebar) after the primary div ends.
The problem is that the content div stops right after the primary div ends, while the secondary div goes on extending below. The content div should extend until the end of the document where the secondary or main div ends.
You can view the code live and the problem it's causing on this website.
Its because of float
give overflow property to your parent.
or create an extra div and give clear:both
One of the common problems we face when coding with float based layouts is that the wrapper container doesn't expand to the height of the child floating elements.The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But you can also use the overflow property to fix this problem. It's not a new CSS trick either. It's been documented before long long ago.
I think the problem is that the 'secondary' element isn't contained within the 'content' element' on your site so obviously 'content' won't grow to accomodate 'secondary'.
You need to have a rethink of your html structure.
Parent elements are never to expand to contain floated elements. To have that element expand to contain them, you add overflow: auto to the parent so the floated element overflowing the element will be contained in most cases. I was unable to find an element to apply that to so you may have done other things to cause this. position:absolute has the same issue where it is taken out of the normal flow and parent elements will not contain them.
The clear property in css needs to be applied to a new div in your code. It works by starting the div below all floating elements within the parent element. It would look something like this:
<div id="main">
<div id="primary">
<div id="content" role="main">
</div>
</div>
<div id="secondary">
<div>
<div style="clear: both"></div> <!-- Don't do inline styles -->
</div>
That should do it. You also should take out the clear: both on #main's CSS. It's not necessary.
I have two fieldsets (as below) that are inside a div. They have been style inline and 50% width. In my head I think they should display on the same line but (at least in chrome, haven't checked IE or ff) the second one wraps to the next line.
I have a twofold question:
Why oh why oh why!?
Is there an easy fix for this? (other than maybe setting them to be 49.8% width)?
http://jsfiddle.net/z22KR/2/
*
{
box-sizing: border-box;
}
fieldset
{
margin: 0px;
border: 0px;
padding: 0px;
display: inline-block;
width: 50%;
background-color: grey;
}
div
{
width: 100%;
margin: 0px;
padding: 0px;
border: 0px;
background-color: green;
}
div div
{
background-color: red;
}
<div>
<fieldset>1</fieldset>
<fieldset>2</fieldset>
<div>div</div>
</div>
Edit I changed inline to inline-block as I intended. Sorry for the confusion there.
Edit2 Also would rather not do any floating if at all possible.
Edit3
My html looks more like
<div class="twoChildren">
<fieldset id="fieldset1"><legend>Fieldset 1</legend>
<div id="listofStuff1">
<table>
...
</table>
</div>
</fieldset>
<fieldset id="fieldset2"><legend>Fieldset 2</legend>
<div id="listofStuff2">
<table>
...
</table>
</div>
</fieldset>
</div>
The problem is caused by your HTML. All whitespace in HTML source code is displayed as a single space character - I'm not sure about the exact technical details of this. This space content between your div elements is what causes the second child div to wrap.
Changing the HTML code in your fiddle to the following solves your problem:
<div><!--
--><fieldset>1</fieldset><!--
--><fieldset>2</fieldset><!--
--><div>div</div><!--
--></div>
Or you could just write all tags adjacent to each other, as long as there's no whitespace between them.
There are many mistakes in your css, please study and write logically. btw do you want like this??
DEMO
EDIT
I find below things are not Good practice, please correct me if i am wrong
Using div div {} is misleading, better use class and id selector
also optimize your css , when you always need margin ,padding and border to 0px then why dont you write on the top with *{}
and also set the css in the order your elements are in the DOM, you first declare css for fieldeset then set css rule for div
#James Valid CSS is another issue and optimize CSS is another