p:nth-child(even) and p:nth-child(odd) losing count with intermediate 's placed after a few <p>'s
Here is what I've got:
p:nth-child(even) {
font-style: italic;
}
<p> text </p>
<p> more text <//p>
<p> and still more text <//p>
<div> stuff </div>
<p> text </p>
<p> more text <//p>
Starts out great: italic, plain, italic, plain, plain
The intermediate <div> stuff </div> resets everything.
???
I think you probably want the functionality of nth-of-type instead of nth-child based on what you're describing. Article on the difference here https://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/
Your example: https://jsfiddle.net/nh16ytq7/
Related
In my form, I have the following JSX written with React and after I create with the button, the success message will touch the button at the bottom, leaving no space. Is there anyway to add that space between? Thanks again.
<button className="btn btn-primary">Create a hat</button>
</div >
</form >
<div className={successClass} id="success-message">
You have created a new hat!
</div>
I tried googling methods to add properties into the button and message but nothing seems to split them apart.
Try adding padding-top to the success message div.
<button className="btn btn-primary">Create a hat</button>
</div>
</form>
<div className={successClass} id="success-message"
style={{paddingTop :"2rem"}}
>
You have created a new hat!
</div>
`
</form>
<div className={successClass} id="success-message">
The best way to position elements is by use of CSS, avoid things like {' '}
Second, make your page structure clear for example
<div class="form-wrapper" style="padding: 10px; margin-bottom:4px;">
<form>
<!-- put your create button here -->
</form>
</div>
<div class="success-msg-wrapper" style="padding: 10px;">
<!-- put your message div here -->
</div>
Finally, make use of class-based styling instead of inline css for better maintainability of the code.
I'm using Bootstrap 5, and in many places I combine a label and an anchor link, and I style the anchor link as small and fig-caption so you get a light gray link that is about the same size as the label.
This works okay on my PC and iPad, but on my phone the link is much larger than the label text.
Why is that, what is better way to do this so remains consistent for all platforms
<div class="row g-2 mb-2">
<div class="col">
<span class="ps-2">
<label>
All tracks composed by
</label>
<span>
<a href="/composer.start?cid=0$=Composer$2682&title=Composers+%2F+Johann+Sebastian+Bach" class="small figure-caption">
Johann Sebastian Bach
</a>
</span>
</span>
</div>
</div>
Update:Actually I have analysed the problem further and it turns out the issue that I have a heading near the top of the page, and if the heading is longer than the width of the screen I get the issue.
e.g
<div class="row g-0">
<div class="col mx-2">
<h4>
Albums / Albinoni; Vivaldi; Cimarosa: Venetian Oboe Concertos (Flac)
</h4>
</div>
I don't get the issue if I use h6 instead of h4 even when text is still wider than screen but then the text is smaller than I would like
I don't get the issue if I don't wrap within bootstrap row and column, if I just do:
<h4>Albums / Albinoni; Vivaldi; Cimarosa: Venetian Oboe Concertos (Flac)</h4>
then it works, but then I have the issue that I dont have the same margin to the left
I am building a lightning web component that uses a combobox. It seems to be having its dropdown portion cut short by the bounds of its container.
I've tried adding height, z-index, overflow, and margin modifiers to the style sheet for the input element and its container, and the only thing that's had a visible effect is adding margin to the combobox's container, which just makes more space for the dropdown to show its contents but doesn't solve the problem.
Here is an excerpt of the html file:
<div class="slds-col slds-grid">
<!-- Complete Task -->
<div class="slds-grid slds-col slds-size_2-of-4 slds-p-right_small slds-truncate">
<div class="slds-col">
<div class="slds-border_bottom" style="background-color: #ecd4b566">Log a Call</div>
<div class="slds-grid_vertical slds-p-top_small">
<div class="slds-col">
<lightning-combobox
class="spencer_combobox"
variant="label-hidden"
placeholder="-- Call Result --"
options={callResults}
value={selectedResult}
required
onchange={handleResultSelection}>
</lightning-combobox>
</div>
<div class="slds-col">
<lightning-textarea maxlength=255 placeholder="Write comments here" onchange={handleComment} value={commentValue}></lightning-textarea>
</div>
<div class="slds-col">
<lightning-button class="slds-col" variant="Brand" label="Complete Task" onclick={handleCompleteTaskClick} disabled={buttonDisabled}></lightning-button>
</div>
</div>
</div>
</div>
I expected the dropdown to be visible on top of the other elements, but it ends up hidden or cut off.
Here is a screenshot; the dropdown menu isn't being cut off by the next element below it, it's actually getting cut off by its own bounds.
Figured it out.
I put slds-truncate in the class of the container, and that comes with overflow:hidden, so I was able to just remove the truncate or edit the style sheet to fix the problem.
I'm trying to animate the height shrinking and growing based on content inside of the element using ng-if. The issue here is with nganimate I can't get the animation to work at all. It's a simple example.
<div>
<div ng-if="this">
Small text
</div>
<div ng-if="that">
<p>Reall long text that can</p>
<p>be several lines long</p>
</div>
</div>
You can use ng-class to do that
<div>
<div ng-class="{small: if-Your-condition-True}">
Small text
</div>
<div ng-class="{big: if-Your-condition-True}">
<p>Reall long text that can</p>
<p>be several lines long</p>
</div>
</div>
in this method, you can create an animation
I am quite used to seeing
div.class1
and
#someId.class1
but what about
.class1.class2
? And I think it is identical to
.class2.class1
? Because there was an element with id someId but now we have two elements of this type showing on the page, so I want to add a class and use the class instead of id, therefore the .class1.class2 instead of #someId.class1
It will select items with both classes. So not items with either one.
<span class="class1 class2"></span>
Yes, it is both legal and common. In the element, you would have something like this:
<div class="class1 class2">Hello</div>
It's nice for syntactic styling. To give you an example, let's say you have the following html:
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
You can add a second (and third, forth, etc.) class that modifies "box". For example:
<div class="first odd box">
</div>
<div class="second even box">
</div>
<div class="third odd box">
</div>
<div class="fourth even box">
</div>
Then, in styling, to style different box groups, you can do the following:
.odd.box {
}
.first.box, .fourth.box {
}
.first.box, .even.box {
}
This will be interpreted by the browser if you give your element does two class:
.class1.class2{width:500px;height:300px;}
<div class="class1 class2"> </div>
If you do like this, it will not be interpreted, resulting on a div with no styles:
.class1.class2{width:500px;height:300px;}
<div class="class2"> </div>
This will be interpreted (resulting on an element with a dimension of 500px X 300px:
.class1 {width:500px;}
.class2 {height:300px;}
<div class="class1 class2"> </div>
The common use of css, is to tell the browser that a certain element with and ID or CLASS of a certain name will get a set of styles, or tell the browser that a certain ID or CLASS will get a set of Styles, like so:
Ex 1:
.class1 {width:500px;} -> elements
with this class will get 500px of
width.
Ex 2:
div.class1 {width:500px;}
-> only a
div element with this class will get
500px of width.
Ex 3:
div.class1, h1.class1 {width:500px;}
-> only a div and a h1 element with this class will get 500px of width.
You can read valid information about css at:
W3C CSS SYNTAX PAGE
Just wanted to confirm the answer given by Jouke van der Maas,
which is the right answer. I would like to quote the following
excerpt from the CSS 2.1 specification:
5.2 Selector syntax
A simple selector is either a type selector or universal selector
followed immediately by zero or more attribute selectors, ID
selectors, or pseudo-classes, in any order. The simple selector
matches if all of its components match. [snip]
Since the .classname selector is equivalent to the [class="classname"] selector,
it is an attribute selector. Note the "in any order" bit. Hence the selector
.class1.class2
is identical to the selector
.class1.class2
and matches both elements like
<span class="class1 class2">Hello World</span>
as well as
<span class="class2 class1">Hello World</span>
which is the same thing, as well as
<span class="class1 class2 class3">Hello World</span>
etc...
You can also get even more fancy.