I have learned about display and float but is like <a> is already inline-block like for example: http://jsfiddle.net/CDe6a/1834/
But the <p> elements aren't, I don't understand this; the code is:
#parent {
border: solid 5px red;
}
.child {
border: solid 1px black;
float: left;
}
<div id="parent">
he
he
he
<p>
a
</p>
<p>
a
</p>
</div>
This for example, and as you can see is inline.
Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. <a> has a default of display: inline and <p> has a default of display: block.
You can check more here:
https://www.w3schools.com/html/html_blocks.asp
Related
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>
There is the DOM property hidden and the CSS property visibility. After reading up on their descriptions I can't really tell when to use which. In what respects does their intended usage differ?
I understand that they functionally might do (many of) the same things, but I am talking about intent.
CSS Visibility is used to hide an element and allocates space for the hidden element in the document layout. As opposed to DOM Hidden which merely hides the element from being shown on the page, without allocating space for the given element.
Perhaps you are looking for display: none?
What is the difference between visibility:hidden and display:none?
Intended usage
The intended usage for hidden (and also explicitly when not to use it) is explained on the page you linked:
The hidden global attribute is a Boolean attribute indicating that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed.
The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.
Normal display:
.box {
background-color: #f0f0f0;
padding: 50px;
}
.inner {
background-color: #ccc;
height: 200px;
}
<div class="box">
<div class="inner"></div>
</div>
[hidden]
.box {
background-color: #f0f0f0;
padding: 50px;
}
.inner {
background-color: #ccc;
height: 200px;
}
<div class="box">
<div class="inner" hidden></div>
</div>
visibility: hidden;
.box {
background-color: #f0f0f0;
padding: 50px;
}
.inner {
background-color: #ccc;
height: 200px;
visibility: hidden;
}
<div class="box">
<div class="inner"></div>
</div>
display: none;
.box {
background-color: #f0f0f0;
padding: 50px;
}
.inner {
background-color: #ccc;
display: none;
height: 200px;
}
<div class="box">
<div class="inner"></div>
</div>
Using HTMLElement.prototype.hidden property:
document.querySelector('.inner').hidden = true;
.box {
background-color: #f0f0f0;
padding: 50px;
}
.inner {
background-color: #ccc;
height: 200px;
}
<div class="box">
<div class="inner"></div>
</div>
Look , if you use visibility prop. in css you will see in html a 'free' space which contains your css element . If you use DOM hidden , it just removes that element . I explain this so .
Use of both css visibility property with hidden value and html hidden attribute is intend to hide element. But there is little difference in between them. css visibility property with hidden value contain its area that is it's height and width. But hidden attribute doesn't contain its DOM area. Here hidden attribute works like css display property with value none. You may will be clear with following example:
<p style="visibility:hidden">Hello how are you?</p>
<p hidden>I am fine.</p>
Now just inspect your browser and check, both are invisible but first paragraph element still contain its area.
An Example: Only DIVs, that containing a LABEL should get the style text-align: right
Following try did not work:
div label:only-child {
text-align: right;
}
Not the label but the div should get this style.
you can use this way
div class="test" style="text-align:left"
div class="test" style="text-align:right"
The solution is to set the width of the label and display property to block. Here's the code
div{
width: 500px;
padding: 20px;
background: #fff;
border: 1px solid #ddd;
}
div>label:only-child{
text-align: right;
width: 100%;
display: block;
}
<div>
<label>adfasdf</label>
</div>
this cannot be done with CSS .
CSS = Cascading Style Sheets so by definition you can select elements from top to bottom of the HTML structure, not the other way around.
so you can't select a parent depending on it's children
you can do this with JQ , there are a number of ways to do it but this would be one of them :
$( "div:has(label)" ).css({ "text-align":"right" });
.div {
height:50px;
border:2px solid red;
margin:2px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div">
<label>Has Label</label>
</div>
<div class="div">
<p>
i am NOT a label
</p>
</div>
<div class="div">
<label>Has Label</label>
</div>
You can't style parent element based on child element using CSS.
Since, it seems that you are trying to align the label element to right, you can do that using float as shown below:
div label:only-child {
float: right; /* instead of text-align: right */
}
Updated (parent has flexbox layout):
div label:only-child {
flex: auto;
text-align: right;
}
You cant't do this in CSS only. Well, of course you can add class to div but there is no parent selector.
But there will be in the future (selectors lvl4 - see last row of selectors overview): https://www.w3.org/TR/selectors4/
I have a DIV element which may contain 1 or 2 Child DIVs
Is there a way to say of there is 1 Child element then the padding should be 15px otherwise 5px
It may like
<div class="container">
<div><strike>7.00</strike></div>
<div>5.00</div>
</div>
or
<div class="container">
<div>7.00</div>
</div>
You can do a trick using margin in the children to get the same effect:
.container div:only-child {
margin: 15px;
}
div {
border: solid 1px red;
}
div div {
margin: 0 5px;
border-color: green;
background: #ccc;
}
div div:first-child {
margin-top: 5px
}
div div:last-child {
margin-bottom: 5px
}
<div class="container">
<div><del>7.00</del></div>
<div>5.00</div>
</div>
<div class="container">
<div>7.00</div>
</div>
PS Use del tag instead strike that is deprecated
No, there is not.
CSS does have some complex quantity queries but these will only style the children based on their number.
It is not (currently) possible to style the parent based on the number of children as there is no Parent Selector
Based on how old this original thread is I'm not providing exact solutions, however, CSS Tricks put a great article together covering Logical CSS styling. You can find the article here.
I have the following HTML:
<div class="selfClear" style="float: left; border: 1px solid black;">
...floated stuff in here...
</div>
<span style="margin-top: 10px; border: 1px solid purple;">hello world</span>
I'd like there to be a 10px gap between the div and span, per the margin-top. But, since the div above is floated, it won't render that way. The fix to make sure something clear's the DIV. To do that via pure CSS, it appears one should use the '::after' method of inserting content that is then set to clear:
.selfClear::after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.selfClear {
display: inline-block;
}
However, this doesn't quite do what I think it should be doing. If I don't include the height/visibility styles so that I can actually see the period as it is inserted, I see that it's actually rendering inside the div (the black border encloses it), rather than after the div (so it's between the div and span). Am I misunderstanding how this should be working?
EDIT:
Here's a simpler example:
CSS:
#theDiv {
border: 1px solid green;
}
#theDiv::after {
content: ".";
}
#theOtherDiv {
border: 1px solid orange;
}
HTML:
<div id="theDiv">
Hello
</div>
<div id="theOtherDiv">
World
</div>
That ends up placing a period after 'Hello' rather than after the div.
It appears that ::after and ::before are actually appended to the CONTENTS of the element, not the element itself. Is that correct?
Yes, it appends to the content of the selected element. You could try wrapping the div then appending after the wrapper div, but that defeats the whole purpose of using :after in the first place.
You could also try setting the enclosing div to 'overflow: auto'. That works everywhere.
I would suggest using clearfix - it's a lot simpler, you just set up a surronding with a class of clearfix.
See this example.