I have the following html:
<div class="pp">TWO <span>WORDS</span>
</div>
And I want to separate them by "#" for example, but only if they are on the same line.
I don't want to use any JS, only CSS.
This is not working:
.pp{
width:20%;
}
.pp::first-line span:before{
content: " # "
}
And I couldn't come up with another idea.
Note that I want one and the same element to either have or not # depending on if it appears on the same lane. E.g.
TWO # WORDS
But
TWO
WORDS
Depending on the size of the window when the 20% can't fit the TWO # WORDS, the WORDS gets on a second line, and then I want the "#" to disappear
The most obvious solution would be to use two spans (text should in text tags anyway and not text nodes).
Then you can target the second child and use :before.
.pp {
width: 20%;
}
.pp span:nth-child(2):before {
content: '#';
}
<div class="pp">
<span>TWO</span>
<span>WORDS</span>
</div>
<div class="pp">
<span>ONE</span>
</div>
Related
In my code, I have a 2 lined text. I want to move the second text (nth-child(3): 10 x apples) to the line below when the width of the screen changes. I have tried display:block and white-space:pre. But it didn't work and the sentence did not move to next line. My code and a screenshot is below. What should I do to achieve this?
#media (min-width: breakpoint-max(sm)) {
.fruit-detail {
& :nth-child(3) {
display: block;
}
}
}
<div class="fruit-detail">
<span class="day-one ng-star-inserted">
"Yesterday"
</span>
<span class="ng-star-inserted">
Today
</span>
<span> 10 x </span>
<span>Apples</span>
</div>
You could wrap "10 x Apples" around a parent container and give it:
.parentContainer::after{
content: "\a";
white-space: pre;
}
Don't know if it works tho, though I don't have sass installed.
This is just a suggestion because it worked for me :).
You can toggle the visibility for a break tag by providing a class to it and setting display:none; to it in your main css and display: block in your matching media query.
Refer to this for a practical example : https://codepen.io/darshiljani/pen/QWxdqpz
You are selecting the third .fruit-detail.
I don't think you can use display:block here because "10x" and "Apples" won't be side by side.
You can select the second span and add a line break with :after (or the third with :before)
.fruit-detail:nth-child(3) {
background-color: orange;
}
.fruit-detail span:nth-child(2):after {
content: "\a";
white-space: pre;
}
<div class="fruit-detail">
<span>"Yesterday"</span>
<span>Today</span>
<span> 10 x </span>
<span>Apples</span>
</div>
<div class="fruit-detail">
<span>"Yesterday"</span>
<span>Today</span>
<span> 10 x </span>
<span>Strawberries</span>
</div>
<div class="fruit-detail">
<span>"Yesterday"</span>
<span>Today</span>
<span> 10 x </span>
<span>Bananas</span>
</div>
My objective is to print a text file line by line and append the line number at the beginning. Like so:
<div id="wrapper">
<div class="line">1: asdf</div>
<div class="line">2: asdfasdf</div>
<div class="line">3: asdfasdfasdfasdf</div>
<div class="line">4: asdf</div>
</div>
n is a variable in CSS responsible for an element's index within its parent and within a child selector you can perform operations on it, eg. nth-child(2n + 3)
Is there any way to grab this variable and insert it as plain text? Essentially like this:
.line:before {
content: n;
}
I know I can accomplish this with SASS which is what I'm using, I was just wondering if there's some way to pull it off with vanilla CSS.
Yes, you could do this using CSS counters. CSS counters can be created and incremented when a matching selector is encountered. For this case, we can create a counter at the .wrapper element's level and then increment the counter value whenever a new .line element is encountered.
The counter-reset property is used to create the counter whereas the counter-increment is used to increment the value. The value of the counter can then be assigned to the pseudo-element through the content property with value as counter(counter-name).
As Aaron Lavers points out in his comment, CSS counters are not a new thing and is supported from IE8 itself.
#wrapper {
counter-reset: line-number;
}
.line {
counter-increment: line-number;
}
.line:before {
content: counter(line-number)": ";
}
<div id="wrapper">
<div class="line">asdf</div>
<div class="line">asdfasdf</div>
<div class="line">asdfasdfasdfasdf</div>
<div class="line">asdf</div>
</div>
We can also set styles for the output value, increment the value by a number more than 1, start with the base value as a number different than 0 etc.
.wrapper {
counter-reset: line-number 2; /* specifying a number in counter-reset means set the starting value as that number */
}
.line {
counter-increment: line-number 2; /* specifying a number in counter-increment means increment the counter by that much every time */
}
.line:before {
content: counter(line-number, lower-roman)": "; /* the second parameter represents the style of the output value */
}
#wrapper2.wrapper .line:before {
content: counter(line-number, decimal-leading-zero)": ";
}
<h3>Lower Roman Style with Base Value as 2 and increments of 2</h3>
<div id="wrapper" class="wrapper">
<div class="line">asdf</div>
<div class="line">asdfasdf</div>
<div class="line">asdfasdfasdfasdf</div>
<div class="line">asdf</div>
</div>
<h3>Decimal Leading Zero Style with Base Value as 2 and increments of 2</h3>
<div id="wrapper2" class="wrapper">
<div class="line">asdf</div>
<div class="line">asdfasdf</div>
<div class="line">asdfasdfasdfasdf</div>
<div class="line">asdf</div>
</div>
i have a problem of making two objects that when i hover on one of them, it will change one object. for example, i have object bar1, bar2, and bar3. i want to make when i hover on bar1 or bar3 will change the bar2.this is the css code:
.bar2{
left:0.5%;
right:0.5%;
}
.bar1:hover + .bar2{left:5%;}
.bar3:hover + .bar2{right:5%;}
and this is my html code:
<div style="position:absolute;">
<div class="bar1">
</div>
<div class="bar2">
</div>
<div class="bar3">
</div>
</div>
from that code i just can affect bar2 by hovering on bar1, but not with bar3.
Every body please help me. and thanks for helping.
What you need to do is something like this: live demo here (click).
<div class="bar1">Bar 1
</div>
<div class="bar3">Bar 3
</div>
<div class="bar2">Bar 2
</div>
css:
#one {
background: red;
}
#two {
background: white;
}
#three {
background: blue;
}
#one:hover ~ #two, #three:hover ~ #two {
background: black;
}
.bar3:hover + .bar2 or .bar3:hover ~ .bar2 is only going to select .bar2 if .bar2 is AFTER .bar3.
It might make more semantic sense for the elements to be in a different order, but in a lot of cases (such as yours here), the result is visually the same even with the order changed. If you can't change the order in order to select things this way, then you would have to resort to javascript to select adjacent elements that are previous.
There is talk of having a parent selector in css4. That would be nice :)
I'm trying to select the first element in the body with class .box but excluding those inside the class .topbar.
I was using this approach :not(.topbar)>.box and is selecting all the elements .box excluding the one inside .topbar but I just want the first one.
I know that I can select it in an easier way but I'm wondering how could I do it that way...
Note: the number of elements are not fixed, so .topbar could exist or not...
Example:
<body>
<div class="topbar">
<div class="box">
...
</div>
</div>
<div class="box"> <!-- Just want to select this one -->
...
</div>
<div class="box">
....
</div>
</body>
Thanks!
I think you can divide this up into two cases:
1) like in your example above, topbar is the first child and box is the second child
2) if topbar doesn't exist, then box is the first child
.topbar + .box, body > .box:first-child {background:red;}
Here is a more robust way of doing it.
Consider a more generalized version of the original HTML snippet:
<div class="topbar">
<div class="box">In the topbar...</div>
<div class="box">In the topbar...</div>
</div>
<div>temp</div>
<div class="box">Just want to select this one...</div>
<div class="box">a second one....</div>
<div>temp</div>
<div class="box">a third one....</div>
<div>temp</div>
<div class="box">a third one....</div>
and apply the following CSS:
body > div.box
{
background-color: beige;
}
body > div.box ~ div.box
{
background-color: pink;
}
See demo at: http://jsfiddle.net/audetwebdesign/Rufcc/
The first rule selects all the div.box elements that are a child of body and applies a background color.
The second rule then selects all the div.box elements after the first one and then overwrites the background-color to some default value (could be transparent).
The main advantage of this approach is it can pick out the first div.box element regardless of how many other elements are before it.
.topbar + .box { background:red; }
I know what I want but I'm not sure how to best express it, so please be forgiving.
I have numbered headlines in my page, and paragraphs following the headlines. I wish to align the text of the paragraphs the same as the start of the title of the headline, and the numbers of the headlines being aligned to the right, at for example 0.5em of the title of the headline.
Here is an example in monospace font:
1. Introduction
This is the beginning of the introduction.
1.1. Sub header
Another paragraph here and when it comes to having
another line, it is indented as the first one.
1.1.1. Sub-sub header
Notice how the headlines and paragraphs are exactly
aligned, whereas the numbers in the headlines are shifted
to the right ?
1.2. Sub header 2
I'm sure you get the picture...
What is the best way to achieve this in HTML/CSS ?
It would be trivial to use tables but I wish to do otherwise if there is a cleaner way.
This is how I would do it:
HTML:
<ul id="list">
<li>
<h2>Intro<em></em></h2>
<p>This is the beginning of the introduction.</p>
</li>
<li>
<h3>Sub header<em></em></h3>
<p>Another paragraph here and when it comes to having
another line, it is indented as the first one.</p>
</li>
<li>
<h4>Sub-sub header<em></em></h4>
<p>Notice how the headlines and paragraphs are exactly
aligned, whereas the numbers in the headlines are shifted
to the right ?</p>
</li>
<li>
<h3>Sub header 2<em></em></h3>
<p>I'm sure you get the picture...</p>
</li>
</ul>
CSS:
#list {
counter-reset: level1 0 level2 0 level3 0;
margin-left:50px;
}
#list h2,
#list h3,
#list h4 { margin-left:-50px; }
#list em { float:left; width:40px; padding-right:10px; text-align:right; }
#list h2 em:before {
counter-increment: level1 1;
content: counter(level1, decimal) ".";
}
#list h3 em:before {
counter-increment: level2 1;
content: counter(level1, decimal) "." counter(level2, decimal) ".";
}
#list h4 em:before {
counter-increment: level3 1;
content: counter(level1, decimal) "." counter(level2, decimal) "." counter(level3, decimal) ".";
}
Live demo: http://jsfiddle.net/9bkwQ/
Notice that:
There are no CSS classes set on the HTML elements - there is no need for that (Result: cleaner code)
The numbering is auto-generated via CSS counters which means that you don't have to update the numbering whenever you want to insert an item between other items.
I imagine you're using custom numbers? You're placing them there yourself without the use of ? I'd imagine so with that system.
Either way, I'd probably set up some divs to look like this:
Quick Note: You'd need to add clear:both to the main container to have them stack nicely.
<div style="display:inline-block; width:100%; clear:both")
<div style="float:left; margin-right:5px">
1.
</div>
<div style="float:left">
The first headline
</div>
</div>
Something like this would work fine and you could use your own styles to manipulate the structure/design, but again, I don't know if it's the absolute best way.
Check out a JSFiddle of it here: http://jsfiddle.net/uvQsR/2/
<div class="section">
<span class="number">1.1.</span>
<h4 class="heading">Sub header</h4>
<p> Another paragraph here and when it comes to having
another line, it is indented as the first one. </p>
</div>
with css
.section {
padding-left:40px;
}
.number{
text-align:right;
margin-left:-40px;
float:left;
width:40px;
}
You could do something like this, adjusting the width and margin as necessary (and depending on the depth/length of the header numbers)
<h2 class="number">1.</h2><h2 class="text">Introduction</h2>
<p>This is the beginning of the introduction.</p>
<h2 class="number">1.1</h2><h2 class="text">Sub header</h2>
<p>Another paragraph here and when it comes to having<br />
another line, it is indented as the first one.</p>
CSS
h2.number{display:inline-block; width:30px;}
h2.text{display:inline-block;}
p{margin-left:30px; margin-bottom:10px;}
http://jsfiddle.net/jasongennaro/VKP9Y/