We are currently using Tailwin custom CSS found here https://github.com/tailwindlabs/tailwindcss/pull/116 the purpose of this css is to easily add borders to elements by just setting border width property, we can change the default border-style for all elements to solid and use border width to hide them
*,
*::before,
*::after {
border-width: 0;
border-style: solid;
border-color: transparent;
}
This bit of css is used system wide unfortunately I'm unable to remove it. Is there a way to prevent this css to apply to a certain class or ID?
For example if the element has a class disableTailwind, it should ignore that css block.
Any tips or suggestions would be greatly appreciated.
Can't you just include the same rules in a css file after the original on each page ?
*,
*::before,
*::after {
border-width: 1px;
border-style: solid;
border-color: black;
}
*,
*::before,
*::after {
border-width: unset;
border-style: unset;
border-color: unset;
}
<div>test</div>
Add border:0; or border:none; to that class or id.
For example if the element has a class disableTailwind, it should ignore that css block.
So, that's the use case for the :not(...) pseudo class, though to make it work, I had to put body before * selectors:
body *:not(.disableTailwind),
body *:not(.disableTailwind)::before,
body *:not(.disableTailwind)::after {
border-width: 3px;
border-style: solid;
border-color: red;
}
<body>
<div>Without .disableTailwind</div>
<div class="disableTailwind">With .disableTailwind</div>
<br />
<button>Without .disableTailwind</button>
<button class="disableTailwind">With .disableTailwind</button>
</body>
Related
I'm trying to apply a CSS style to multiple div elements as in the following HTML code:
{% for i in player_range %}
<div id="container-frame-{{ i }}"
...
</div>
{% endfor %}
Where the value of i is variable and being passed to the HTML from the Python side of my software.
Below is the CSS style I'd like to apply for each element.
#container-frame-0{
border-style: solid;
border-width: 5px;
border-color: green;
}
I tried to hardcode the different values of i (e.g, 0,1,2 etc...) to the container-frame style and it works fine. However, I'm searching for a cleaner way to do it.
Ideally I'm looking for something like this:
#container-frame-{{i}}{
border-style: solid;
border-width: 5px;
border-color: green;
}
Where i is the same as in the HTML.
Any idea how to do so?
Give the div a class. Use a class selector.
<div id="container-frame-{{ i }}" class="container-frame"
.container-frame {
border-style: solid;
border-width: 5px;
border-color: green;
}
You could also use an attribute selector.
[id^="container-frame-"] {
border-style: solid;
border-width: 5px;
border-color: green;
}
Use #Quentin approach or use this selector in your CSS:
div[id^="container-frame-"]{ ... }
use class for mulitple elements, because id its just for on element
<div class="myClass"></div>
<div class="myClass"></div>
And in CSS:
.myClass{
border-style: solid;
border-width: 5px;
border-color: green;
}
So, your current code is not working because id's should only apply to one element. Try giving each div a class, and then style them like this:
/* Notice use of dot instead of hash */
.whatever-name-you-want {
border-style: solid;
border-width: 5px;
border-color: green;
}
You can read up on this here: https://www.w3schools.com/css/css_syntax.asp
As mentioned by others, you could use a class but alternatively you can use an attribute selector.
div[id^="container-frame-"], div[id*=" container-frame-"] {
border-style: solid;
border-width: 5px;
border-color: green;
}
Please see this question for more detail: wildcard * in CSS for classes
I'm trying to add a border to a div element in HTML. Below is my code.
#container-border {
border-width: 2px;
border-color: red;
}
<div id="container-border">
...
</div>
For some reason, the border doesn't show up. I had a look on a similar question (here) but I couldn't figure out why the border doesn't show up. Any suggestions please?
Note: This snippet is a part of an HTML page. Additional code could be provided upon request
The default value of border-style is none. You need to set a different value for a border to appear.
#container-border {
border-width: 2px;
border-color: red;
border-style: dashed;
}
<div id="container-border">
...
</div>
You can use the shortcode for border, which contains color, width AND style (which you are missing right now, and whose default setting is "none"):
#container-border {
border: 2px solid red;
}
You have to set the rule "border-style" to see the border
#container-border {
border-width: 2px;
border-color: red;
border-style:solid;
}
<div id="container-border">
...
</div>
I have different css classes based on different actions. Everything is working good, but when I apply activeBackground class based on condition its making div background-color to green but border-left-color is not coming green its still using .arrow-div class. How can I resolve this issue and apply .activebackground class when needed?
HTML
<div class="text-arrow" ng-class="{'activeBackground': applyActiveFile, 'completeBackground':applyComplete}">File Selection
<span class="arrow-div"></span>
</div>
CSS
.text-arrow {
background-color:#BABABA;
color:#fff;
display:inline-block;
padding-left:45px;
}
.arrow-div {
border-style: dashed;
border-color: transparent;
border-width: 0.15em;
display: -moz-inline-box;
display: inline-block; /* Use font-size to control the size of the arrow. */
font-size: 100px;
height: 0;
line-height: 0;
position: relative;
vertical-align: middle;
width: 0;
background-color:#fff; /* change background color acc to bg color */
border-left-width: 0.2em;
border-left-style: solid;
border-left-color: #BABABA;
left:0.25em;
}
.activeBackground{
background-color: green;
border-left-color: green !important;
}
It appears to me that you're applying .arrow-div and .activeBackground to different elements, and the way your code is written, .activeBackground can't override .arrow-div because it's being applied to a different element (the parent). To affect the child element (the span containing the arrow) you need to set up a css rule that directly targets any child .arrow-div of .activeBackground.
My solution was to simply modify your css like so, providing a way to change the arrow div:
.activeBackground{
background-color: green;
}
.activeBackground .arrow-div{
border-left-color: green;
}
Here's a fiddle of it in action:
https://jsfiddle.net/cupno5g9/
I'm trying to understand how wildcard selector in CSS does work?
Consider the following HTML markup:
<div id="child">
</div>
And corresponding CSS:
div[id="child"] {border-color: green; }
#child{
border: 20px solid;
background: aqua;
height: 50px;
margin: 10px;
}
I think, that style of div.child will be:
border: 20px solid;
background: aqua;
height: 50px;
margin: 10px;
border-color:green;
I.e. border-color:green just add to a stylesheet of div.child. But if we write
div[id="child"] {border-color: green!important; }
#child{
border: 20px solid;
background: aqua;
height: 50px;
margin: 10px;
}
It works like
#child{
border-color: green;
border: 20px solid;
background: aqua;
height: 50px;
margin: 10px;
}
Question: Why we must using div[id="child"] {border-color: green!important; } rather than div[id="child"] { border-color: green } for applying green color for border?
It's an issue of specificity. Example demonstrating this.
Refer to the following documentation:
6.4.3 Calculating a selector's specificity
count the number of ID attributes in the selector (= b)
count the number of other attributes and pseudo-classes in the selector (= c)
count the number of element names and pseudo-elements in the selector (= d)
Therefore #child has a specificity of 100. And div[id="child"] would have a specificity of 11.
Usage of !important would effectively override the border applied by #child.
Alternatively, you could use the following, and avoid using !important.
jsFiddle example
div#child[id="child"] {
border-color: green;
}
This doesn't explain the difference between using !important and not using it, but rather how to apply the green border without using two rules.
If you look at the documentation for border:, you will find this:
Formal syntax: <br-width> || <br-style> || <color>
<color>:
A <color> denoting the color of the border. If not set, its default value is the value of the element's color property (the text color, not the background color). See border-color.
The default color is #000 (black).
So, by writing
border: 20px solid;
you are basically specifying:
border-width: 20px
border-style: solid;
border-color: #000;
And if you put border-color: green before that rule, it will be overwritten. So you could either write:
border: 20px solid;
border-color: green;
or
border: 20px solid green;
Using two rules just to apply the border color is unnecessary.
It has to do with the specificity of your selector. When there is a conflict between multiple selectors which are trying to apply mutually exclusice styles, specificity is the measure that determines which styles win out.
So your first selector div[id="child"] is an attribute/class selector, which has lower specificity than the Id selector from your second block: #child
When you apply !important to a style, it is applied irrespective of specificity. It should also be used sparingly for that reason.
I want to set a border color and border style ( like solid or dotted ) in one place in my css file and apply borders to elements just by doing something like this:
body {
border-color: #333;
border-style: solid;
}
div.heading {
border-right-width: 1px;
}
Can this be done?
Do common browsers support this?
Try something like
<html>
<head>
<style>
* {
border: 0px solid #333;
}
div.heading {
border-right-width: 5px;
}
</style>
<body>
<div style="width:100px; height:100px;background-color:grey;" class="heading"></div>
<br /><br /><br /><br />
<div style="width:100px; height:100px;background-color:grey;"></div>
</body>
</html>
i guess this is what you really needs
no you cant apply css to body and hope it will affect all elements inside.. you will have to use some css selectors read something about it HERE
you can write like this
common style
*{
border:0 solid #333;
}
OR
div.heading, body {
border:0 solid #333;
}
override the common style
div.heading {
border-right-width: 2px;
}
Yes this can be done.
You could also set a default buy defining a standard border in body with no width:
body {
border-style: none;
border-color: #000000;
border-width: medium;
}
div.withborder {
border-style: solid;
}
This will set default border to 'medium, color #000000' but will turn off borders for all elements by default. When you set the border of any element to 'solid', it will automatically inherit the other options (color, width) you set.
EDIT: the following code was tested and worked:
<html>
<head>
<style type="text/css">
body {
border-style: none;
border-color: #000000;
border-width: medium;
}
.withborder {
border-style: solid;
}
</style>
</head>
<body>
<p>No border.</p>
<p class="withborder">A solid border.</p>
</body>
</html>