How can I highlight all spans and divs in my html that have classes that are not styled? this is for debugging purposes, to remind me what I will still have to fix up.
Use border to highlight the span and div elements
Do either:
span, div{
border: 1px solid red;
background-color: yellow;
}
Or:
.unstyledClassOfDivAndSpan{
border: 1px solid red;
}
I would add an XXX class to all the elements, then use this definition:
.XXX {
border: 5em solid red;
background-color: green;
}
Make sure this is at the end of the stylesheet so it doesn't get overridden. Then as elements are done, remove the XXX class.
Please Use this Css Hover Style for highlight all spans and divs in your html
div, span{
border: 1px solid red;
background-color: Black;
}
div:hover, span:hover{
border: 1px solid Black;
background-color: red;
}
OR
*Please Use this Css and Jquery Hover Function for highlight all spans and divs in your html*
.hilight{
border: 1px solid red;
}
$(function(){
$("spna div").hover(function(){
$(this).toggleClass("hilight");
});
});
Related
please I have got below CSS to change mobile add to cart button background to gold color
.add-to-cart-wrap .button::before {
background:gold !important;
}
I'd like to make the border color "purple". Thanks
This solution does what you need:
.add-to-cart-wrap .button {background-color: gold; border: 1px solid purple;}
If button is a standalone element then you can try this.
Update example
As you can see here it works, you just have to figure out if you have other css selectors affecting your button, in that case use them to change the css.
.button {
background: gold;
border: 1px solid purple;
width: 100px;
height: 100px;
border-radius: 100px;
}
<button class="button">Cart</button>
.button {
background: gold !important;
border: 1px solid purple;
}
Otherwise, if button is a class belonging to the tag that contains .add-to-cart-wrap then try this
.add-to-cart-wrap.button {
background: gold !important;
border: 1px solid purple;
}
I have vuetify 1.5.x on my codepen. As you can see in my codepen, the line on autocomplete is quite thick. I only want that line to be only 1px. I want that select field (outline border) to be border: 1px solid red. I am try inspect element and see that class, then I write code like this:
.theme--light.v-select-list v-card {
border: 1px solid red;
}
this code doesn't work. I try another way using this code:
theme--light.v-select-field--outline > .v-input__control > .v-input__slot {
border: 1px solid red;
}
this code doesn't work too. What should I do?
Override in your global or component style
.v-text-field--outline.v-input--has-state>.v-input__control>.v-input__slot,
.v-text-field--outline.v-input--is-focused>.v-input__control>.v-input__slot,
.theme--light.v-text-field--outline:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot:hover {
border: 1px solid !important;
}
.theme--light.v-text-field--outline>.v-input__control>.v-input__slot {
border: 1px solid !important;
}
Is there a way to use SASS/CSS to set a style for an element that has a common class as well as another. For example, I would like the border to appear for elements that are either:
<div class="plate eggs"></div>
<div class="plate bacon"></div>
but not:
<div class="plate"></div>
The code I have at the moment but I'm sure there's a way to combine the two rules?
.plate {
border: none;
&.eggs {
border: 1px solid red;
}
&.bacon {
border: 1px solid red;
}
}
SCSS:
.plate {
border: none;
&.eggs,&.bacon {
border: 1px solid red;
}
}
SASS:
.plate
border: none
&.eggs,&.bacon
border: 1px solid red
You can validate your styles in sassmeister.
Why not add another class ? But if that's not the case, I'd use :not([class]) . Ormaybe even further, you can consider using div[class^="eggs"]
In my app a frequently used HTML component is styles as:
.box {
min-width: 100px;
padding: 20px 10px;
}
there are a lot of these (100+) and their border is styled without bottom and different by color:
.box:nth-child(1) {
border: 2px solid red;
border-bottom: none;
}
.box:nth-child(2) {
border: 2px solid green;
border-bottom: none;
}
.box:nth-child(3) {
border: 2px solid blue;
border-bottom: none;
}
.box:nth-child(4) {
border: 2px solid yellow;
border-bottom: none;
}
...
There's a page in the app where all these boxes need to be displayed with full border (including the bottom border) - what is needed is to remove the 'boder-bottom:none' definitions. So in this specific page I've tried to override the .box definition:
.box {
border-bottom: initial; /* tried unset as well...*/
}
But this still results with no border. Is there a way to specify a style so all the .box accepts the full border - or I have to redefine all of the bottom borders?
-Dan
Why not define another class for that component and define border-bottom for that class and put it as !important
.another_class{
border-bottom: 1px solid #efefef !important;
}
border-bottom: initial; won't give you a border.
Set the second definition to border-bottom: 1px solid #efefef;
I have a question regarding the div element border
I am trying to create bunch of divs that acts like a table
so
<div class='div'>first</div>
<div class='div'>second</div>
<div class='div'>third</div>
<div class='div'>four</div>
My css is
.div{
border: solid 1px black;
}
All my divs have borders but the problem is all my divs's top and bottom border are 2 px instead of 1px because my css apply 1 px on every div. The second and the third div have thinker border on top and bottom.
I can't really change the class name because it's dynamically generated. Is there anyway to work around this issue?
Thanks a lot!
Remove the top border from every element except of the first one.
.div {
border-style: solid;
border-color: black;
border-width: 0 1px 1px 1px;
}
.div:first-child {
border-width: 1px;
}
Here's an example of the difference.
did you tryed write something like this :
.div {
border:1px solid black;
border-bottom:0;
}
.div:last-child {
border-bottom:1px solid black;
}
Try to add this to your styles.
<style>
.div{
border: solid 1px black;
border-bottom:none;
}
.div2{
border: solid 1px black;
}
</style>
Then add this to your body:
<div class='div'>first</div>
<div class='div'>second</div>
<div class='div'>third</div>
<div class='div2'>four</div>