Can CSS check if the element is breaking? - css

Is there a way to check(in CSS) if an element is breaking/new lining?
I can't know the width of the divs or the parent. I only want to know the first element after the break, so I can add special CSS to this element
Like this:
<div>
first
</div>
<div>
second
</div>
<div>
third
</div>
<div>
fourth
</div>
the css:
div {
float:left;
width:200px;
height:20px;
}
div:not(:first-child) {
padding-left:10px;
}
here i need a check if the element is on a new line so I can remove the padding :
div:first-after-break {
padding-left:0;
}

I think in this case, you could probably do this by using padding-right to separate your elements, instead of padding-left. That way, elements are not indented when they start on a new line. If padding-right causes problems at the end of the line, you could consider using the :last-child pseudo selector (more information about :last-child), and set padding-right: 0; there.
This doesn't discard the question, though. I can think of legitimate uses of the :first-after-break pseudo you describe. For example: a fully responsive layout using floating block-level elements. In such a case, one might want to know if an element is at the left of the window.

You could use the ::first-line pseudo element to get the first line of a div. If you want to apply style rules to lines that are not the first line, you could apply those styles to the whole element and then remove it from the first line. But if you want to specifically use the padding property, you could also set text-indent on the whole element (without any pseudo elements).

No, I don't think there's a way in CSS to do what you're asking.
A DIV automatically takes up the full width of it's parent unless a width is specified since it's a BLOCK level element so if no width is specified so your second DIV would be on a new line anyway.

Related

How to apply CSS on n-th div in page

I have 4 dynamic divs in a page starting with the same text (dropdown1, dropdown2, dropdown3, dropdown4). The number changes every time I refresh the page but string "dropown" remains the same.
I want to apply the rule to dropdown4(the number may change on next refresh but div will always be on 4th position in the page.) How do I do that?
I have been using the following code which hides all the divs
div[id^='dropdown']{
display: none;
}
Just want to hide 4th div, is it possible? Don't want to use JavaScript here, pure CSS.
Use the :nth-of-type() selector
div:nth-of-type(4) {
display:none;
}
<div>test1</div>
<div>test2</div>
<div>test3</div>
<div>test4</div>
this selector applies formatting to anything ending in what you want.
https://www.w3schools.com/cssref/sel_attr_end.asp
[class$="box4"] , which selects elements whose class names ends in box4.
If you add div to the area outside:
Div[class$="box4"] it selects any div matching the same case. Hope that helps.

Getting H1 text to wrap beside a ::before pseudo element

I have a fairly long H1 title containing a link with a pseudo ::before element that I want to wrap to two lines correctly. Here's what I need:
A pseudo ::before element on an a link inside of an H1 (it needs to be clickable, so can't be on the H1).
I have this done successfully.
The text to wrap normally and align with the left side of the first word.
This is where the problem is.
See my testing codepen here: http://codepen.io/dmoz/pen/EaZqKv
Seems like it should be a simple fix, but I can't think of what controls how the text wraps. Any thoughts?
Adding float:left to pseudo element will do it.
Check updated demo
Right now your image is being displayed as an inline element (think of it flowing like a single character like an 'A' or a '9'). To have text wrap around it, you need it floated. I'm not sure if this forces block level formatting, but it does force other elements to
http://codepen.io/anon/pen/MYJNEp
Like so:
.site-title a:before {
...
float:left;
}
Edit: remember to clear your float if you have other elements that appear after the your h1 (highly likely)

How to force inline-block elements to wrap?

I have an inline-block div.
.element {
display: inline-block;
}
I use jquery to repeatedly append it to the DOM.
var element = $("<div class='element'>");
$(body).append(element).append(element).append(element).append(element);
However the appended divs do not wrap. It is as if I had the following mark-up (no newlines)
<div class="element"></div><div class="element"></div><div class="element"></div><div class="element"></div>
Appending whitespace inbetween the elements does not fix problem:
$(body).append(element).append(" ");
How can I force these elements to wrap? (I do not want to use floats).
If they are simply div elements set to inline-block they should wrap like so: http://jsfiddle.net/72cYy/
Check and be sure their container/parent element does not have a white-space:nowrap. That would cause them to not wrap.
You can give the elements width in terms of percentage. Change the percentage value with regard to the number of elements and how you want to wrap it.
I would recommend styling the element class with css to create the whitespace. If you don't want to do this you can always try to append a non-breaking space.
var element = $("<div class='element' /> ");
Alternatively, if the ::before pseudo element isn't being used, you can utilize it's powers to solve this issue.
element:before { /* single : to support older browsers */
display:block;
width:100%;
}
this is a solution for inline elements

Technical explanation of how outline, border and padding are rendered in this example?

I'm learning css and was struggling to understand why the html is rendering like so:
http://jsfiddle.net/46nVs/
I can understand why the the red border is being cut off from the top and left. It's because outlines don't take up space since they're drawn outside of the box: https://developer.mozilla.org/en/CSS/outline. In this example they're being drawn outside of the <body> element.
However I was confused as to why border is being cut off from the
top. Any ideas?
What css can be applied to the <span> element to make the entire
outline and border display?
Also, is it ever considered okay to place an inline element next to
a block element like <span>somestuff</span><div>somecontent</div>?
Border (and padding, for that matter) are being cut off due to <span> being an inline element.
Any block level element (or anything with display: inline-block) is subject to different rules (eg. can have width set), and one of those rules says "Block elements are positioned from the start of the border, inline are position from the start of the content".
Quick Edit: You've changed your question, and Sagar has answered the other parts of it well enough for me not to bother :)
Point 1:
If you add a float:left or a display:block, the box will render correctly. This is because span is an inline element.
Point 2:
Add the following:
margin:10px 0 0 10px;
float:left;
Point 3:
You can place an inline element next to a block element as the design requires. You can also change the display style of the inline element by setting display:block or display:inline-block or any of the other display values allowed.
In addition to what others commented, the thing to remember here is not to use span's unless you want to do color or font changes (by applying a class), for example:
<div class="post">
<div class="post_information">
<span class="date">11/1/2012</span>
<span class="author">Mr. Smith</span>
</div>
<p>Lorem ipsum</p>
</div>
.date {font-weight:bold;}
.author {color:#ff0000;}
If you want a "box" behavior, use a div or a p instead. Overriding the default behavior of span to make it display as block, although technically possible, will probably mean you are using the wrong element or your HTML is not semantic enough. (span has no semantic value)

display:inline vs display:block [duplicate]

This question already has answers here:
What is the difference between display: inline and display: inline-block?
(7 answers)
Closed 2 years ago.
What is the basic difference between the following CSS:
display:inline
and this:
display:block
Using these separately on an element, I get the same result.
display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise (by adding a float declaration to another element, for instance).
display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks does the element form an 'anonymous block', that however has the smallest possible width.
Read more about display options : http://www.quirksmode.org/css/display.html
Block
Takes up the full width available, with a new line before and after (display:block;)
Inline
Takes up only as much width as it needs, and does not force new lines (display:inline;)
display: block - a line break before and after the element
display: inline - no line break before or after the element
Here is a comparison table:
You can view examples here.
display: block; creates a block-level element, whereas display: inline; creates an inline-level element. It's a bit difficult to explain the difference if you're not familiar with the css box model, but suffice to say that block level elements break up the flow of a document, whereas inline elements do not.
Some examples of block level elements include: div, h1, p, and hr HTML tags.
Some examples of inline level elements include: a, span, strong, em, b, and i HTML tags.
Personally, I like to think of inline elements as typographical elements. This isn't entirely or technically correct, but for the most part inline elements do behave a lot like text.
You can read a more through article on the topic here. Seeing as several other people in this thread have quoted it, it may be worth a read.
Display : block will take the whole line i.e without line break
Display :inline will take only exact space that it requires.
#block
{
display : block;
background-color:red;
border:1px solid;
}
#inline
{
display : inline;
background-color:red;
border:1px solid;
}
You can refer example in this fiddle http://jsfiddle.net/RJXZM/1/.
block elements expand to fill their parent.
inline elements contract to be just big enough to hold their children.
display:block
takes the entire row(100%)of the screen ,it is always 100%of the screen size
display block example
display:inline-block takes up as much width as necessary ,it can be 1%-to 100% of the screen size
display inline-block example
that's why we have div and span
Div default styling is display block :it takes the entire width of the screen
span default styling is display:inline block :span does not start on a new line and only takes up as much width as necessary
Add a background-color to the element and you will nicely see the difference of inline vs. block, as explained by the other posters.
Display:block
It very much behaves the same way as 'p' tags and it takes up the entire row and there can't be any element next to it until it's floated.
Display:inline
It's just uses as much space as required and allows other elements to be aligned alongside itself.
Use these properties in case of forms and you will get a better understanding.
a block or inline-block can have a width (e.g. width: 400px) while inline element is not affected by width. inline element can span to the next line of text (example http://codepen.io/huijing/pen/PNMxXL resize your browser window to see that) while block element can't.
.inline {
background: lemonchiffon;
div {
display: inline;
border: 1px dashed darkgreen;
}
Block Elements: Elements liked div, p, headings are block level. They start from new line and occupy full width of parent element.
Inline Elements: Elements liked b, i, span, img are inline level. They never start from new line and occupy width of content.

Resources