I use a very complex CSS code just to add some basic content with a :before element. I have two .bold_help_text elements and I want to add different contents before each of these different divs.
I want the "ONLY $5.00" to be changed to different prices the first and second time it appears.
I don't know how to target the number one div or the number two div.
This is my current code:
CSS:
.bold_option_checkbox span.bold_help_text:first-of-type>small:before {
content: 'ONE TIME OFFER - ONLY $5.00';
color: #cc3300;
font-weight: 700;
font-size: 13px;
font-family: 'Montserrat', sans-serif; !important;
}
This html code is used 2 times but different text content
1st time:
HTML:
<div class="bold_option bold_option_checkbox ">
<label>
<span class="bold_option_element"></span>
<span class="bold_option_title">Yes, I want to add my name!</span>
</label>
<span class="bold_help_text"><small>Text Content</small></span>
</div>
2st time:
<div class="bold_option bold_option_checkbox ">
<label>
<span class="bold_option_element"></span>
<span class="bold_option_title">Yes, I want Envision Leggings 50% OFF!</span>
</label>
<span class="bold_help_text"><small>Text Content</small></span>
</div>
Here are two examples of different elements.
First element Secound element
use :first-child selector with .bold_option_checkbox
.bold_option_checkbox span.bold_help_text:first-of-type>small:before {
content: 'ONE TIME OFFER - ONLY $5.00';
color: #cc3300;
font-weight: 700;
font-size: 13px;
font-family: 'Montserrat', sans-serif;
}
.bold_option_checkbox:first-child span.bold_help_text:first-of-type>small:before {
content: 'ONE TIME OFFER - ONLY $10.00';
}
<div class="bold_option bold_option_checkbox ">
<label>
<span class="bold_option_element"></span>
<span class="bold_option_title">Yes, I want to add my name!</span>
</label>
<span class="bold_help_text"><small>Text Content</small></span>
</div>
<br><br><br>
<div class="bold_option bold_option_checkbox ">
<label>
<span class="bold_option_element"></span>
<span class="bold_option_title">Yes, I want Envision Leggings 50% OFF!</span>
</label>
<span class="bold_help_text"><small>Text Content</small></span>
</div>
Related
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 1 year ago.
I have a problem similar to this, but not identical to it...
In my case I have the following layout:
<span class="title">Title1:</span>
<span class="content">Content1</span>
<span class="title">Title2:</span>
<span class="content">Content2</span>
<span class="title">Title3:</span>
<span class="content">Content3</span>
<span class="title">Title4:</span>
<span class="content">Content4</span>
Which is displayed like this:
Title1: Content1
Title2: Content2
Title3: Content3
Title4: Content4
with the help of the following CSS
span.title{
font-weight: bold;
}
span.content::after {
content: "\a";
white-space: pre;
}
However, there will be a case where the first span.title will be orphan - not followed by a span.content but rather by another span.title. In that special case, I want the orphan span.title to be in its own line... So it will be like this:
Oprhan title
Title1: Content1
Title2: Content2
Title3: Content3
Title4: Content4
What's the correct rule to cover that :not() case?
I've tried quite many variations like the one below, but non seems to work...
span.title::after + :not(span.content) {
content: "\a";
white-space: pre;
}
Thanks a lot in advance!
EDIT: Basically, the more I think about this, the more I suspect it can't be solved in CSS... + operator selects the element after it, not before it...
Could add the line break before the next line instead of after the orphaned title perhaps.
span.title{
font-weight: bold;
}
span.content::after {
content: "\a";
white-space: pre;
}
span.title + :not(span.content)::before {
content: "\a";
white-space: pre;
}
<span class="title">Orphan Title</span>
<span class="title">Title1:</span>
<span class="content">Content1</span>
<span class="title">Title2:</span>
<span class="content">Content2</span>
<span class="title">Title3:</span>
<span class="content">Content3</span>
<span class="title">Orphan Title2</span>
<span class="title">Orphan Title3</span>
<span class="title">Title1:</span>
<span class="content">Content1</span>
<span class="title">Title2:</span>
<span class="content">Content2</span>
<span class="title">Title3:</span>
<span class="content">Content3</span>
This question already has answers here:
Hide text in html which does not have any html tags [duplicate]
(3 answers)
Closed 1 year ago.
I searched a lot here and I do not think there is already an answer.
Only in CSS :
I want the first woocommerce-Price-amount span to be the only one displayed. I can display: none the second but the – which is considered as "#text" by the console won't disapear.
So I have something like :
ARTICLE
160.00€ –
The – is making me crazy...
<span class="price">
<span class="woocommerce-Price-amount amount">
160.00
<span class="woocommerce-Price-currencySymbol">
€
</span>
</span>
–
<span class="woocommerce-Price-amount amount">
1 260.00
<span class="woocommerce-Price-currencySymbol">
€
</span>
</span>
</span>
Every changes I made sure that nothing overwrite my CSS lines.
I tried text-indent: -999px, color: transparent the parent and color: black the child, and more but nothing works...
Thank you !
You could simply set the font-size of the .price span to 0, and then override this in the amount span, as shown in this snippet below:
span.price {
font-size: 0;
}
span.woocommerce-Price-amount.amount {
font-size: initial;
}
span.woocommerce-Price-amount.amount:nth-of-type(2) {
display: none;
}
<span class="price">
<span class="woocommerce-Price-amount amount">
160.00
<span class="woocommerce-Price-currencySymbol">
€
</span>
</span>
–
<span class="woocommerce-Price-amount amount">
1 260.00
<span class="woocommerce-Price-currencySymbol">
€
</span>
</span>
</span>
Of course, this doesn't remove the dash it just, effectively, hides it.
I have an Angular 5 component that is basically just a label and input
<div class="form-group">
<label for="wwid">WWID</label>
<input id="wwid" required ...lots of attrs...>
</div>
Using CSS I've then defined a style:
.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
When the field is blank, I'm getting two red borders. The one on the input field that I want, but also one to the right of the label that I do not want. How do I get rid of the red line on the label?
Here's the actual full HTML that used by the component.
<ng-template #listSelectionFormatter let-r="result">
<span>{{r.wwid}} - {{r.fullName}}</span>
</ng-template>
<div class="form-group">
<label *ngIf="labelText" for="wwid">
{{ labelText }}
<span *ngIf="isRequired"> <sup class="requiredIndicator">*</sup></span>
</label>
<!-- inputFormatter is the format for what is placed into the input field after choosing from the dropdown -->
<input id="wwid" type="text"
class="form-control"
placeholder="Search by WWID, IDSID, Name or Email"
(selectItem)="onWorkerSelected($event.item)"
(input)="onTextFieldChanged($event.target.value)"
[ngModel]="selectedWorker"
[ngbTypeahead]="search"
[inputFormatter]="selectedResultsFormatter"
[resultTemplate]="listSelectionFormatter"
[disabled]="disabled"
[required]="required"
/>
<span *ngIf="searching">searching…</span>
<div class="invalid-feedback" *ngIf="searchFailed">Lookup failed.</div>
</div>
The requiredIndicator thing is just for an older style I was using to show an asterisk if it was required, and used this CSS:
.requiredIndicator {
color: red;
font-size: larger;
vertical-align: baseline;
position: relative;
top: -0.1em;
}
This question already has answers here:
How do I stop <div> tags interfering with counters?
(2 answers)
Closed 7 years ago.
I am trying to use CSS counters to be applied to a series of elements and I miserably fail to get it right.
The HTML code is very simple:
body {
counter-reset: objgen;
}
span.general:before {
content: counter(objgen);
counter-increment: objgen;
}
span.general {
counter-reset: objesp;
font-weight: bold;
}
span.esp:before {
content: counter(objgen) "." counter(objesp);
counter-increment: objesp;
}
span.esp {
font-weight: bold;
}
<p>inputs: </p>
<p><span class="general"></span> <input type="text" value="test1"></p>
<p><span class="esp"></span> <input type="text" value="test2"></p>
<p><span class="esp"></span> <input type="text" value="test3"></p>
<p><span class="general"></span> <input type="text" value="test4"></p>
<p><span class="esp"></span> <input type="text" value="test5"></p>
<p><span class="esp"></span> <input type="text" value="test6"></p>
The objgen counter runs OK but the objesp never increments its value: it is always equal to one. What am I doing wrong?
Is the problem coming from the fact that the span with class "esp" is not nested within the span with class "general"?
COMMENT
It seems that as pointed by Paulie_D the problem is with the structure, the following HTML works with no problem (it is not the only possibility):
<span class="general"></span><input type="text" value="test1">
<span class="esp"></span><input type="text" value="test2">
<span class="esp"></span><input type="text" value="test3">
<span class="general"></span><input type="text" value="test1">
<span class="esp"></span><input type="text" value="test2">
<span class="esp"></span><input type="text" value="test3">
you are using class wrong. you don't need to assign the element span if you already assigned the element a class.
So instead of
span.general -> .general
That might solve your problem.
body {
counter-reset: objgen;
}
.general::before {
content: counter(objgen) ;
counter-increment: objgen;
}
.general {
counter-reset: objesp;
font-weight: bold;
}
.esp::before {
content: counter(objgen) "." counter(objesp);
counter-increment: objesp;
}
.esp {
font-weight: bold;
}
how about this?
I need to create inline element to control collapsible element. I've created the following:
<label class="control-label" for="surname">Surname</label>
<div class="controls">
<input type="text" class="input-xlarge" id="surname">
<p class="help-block">Input your surname. <a data-toggle="collapse" data-target="#surname-more">More...</a></p>
<div id="surname-more" class="help-block collapse in">Additional information about surname will be here.</div>
</div>
So, such element is a here. But it looks bad (blue link within grey text). Is there any standard Twitter Bootstrap class, which should be used in such scenario?
Applying the help-block style to the link makes the "More..." text gray, but the link still shows the dark blue color when you hovered over the link.
I would write your own custom style to handle this:
.help-block-link {
color: #999;
}
.help-block-link:hover {
color: #333;
text-decoration: none;
cursor: pointer;
}
<a data-toggle="collapse" data-target="#surname-more" class="help-block-link">More...</a>