Update: See: How to style :root without !important using proper specificity
Is it not possible?
This Style rule is totally ignored
You forgot the parenthesis to :host():
elem.attachShadow({mode: 'open'})
.innerHTML = `
<style>
:host([player="X"]) {
display: inline-block;
background: red;
padding 1em;
}
</style>
Hello World`
<game-toes id=elem player="X"></game-toes>
Related
I have a Nuxt 2 app and I'd like to create a component with a <style> tag like the following, using CSS properties for styling.
The goal is to define a default CSS property in the component that can be overridden from outside.
However, when I try this method, the default values don't seem to work at all.
<style lang="scss" scoped>
:root {
--default-badge-color: linear-gradient(90deg, #1717ff 0%, #bc29e0 92%);
--default-badge-text-color: #fff;
--default-badge-font-size: 1.6rem;
--default-badge-padding: 0.6rem 1rem;
--default-badge-border-radius: 16px;
}
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--badge-padding, var(--default-badge-padding));
border-radius: var(--badge-border-radius, var(--default-badge-border-radius));
background: var(--badge-color, var(--default-badge-color));
color: var(--badge-text-color, var(--default-badge-text-color));
font-size: var(--badge-font-size, var(--default-badge-font-size));
text-align: center;
}
</style>
Do I have the wrong approach for the syntax?
EDIT: I corrected to padding: var(--badge-padding, var(--default-badge-padding)). But the CSS properties are still not found except I define them inside .badge.
It doesn't really make sense to scope :root, which is intended to select the root of the document with higher specificity than the html selector. That would be like scoping a style for <body>.
Perhaps you're hoping :root was a selector for the current component's root element (like :host is for Shadow DOM), but there's no such pseudo-class in Vue. An alternative is to apply your own class to the component's root element, and use that as a selector:
<template> 👇
<div class="my-root">
<div>...</div>
<div class="badge">...</div>
</div>
</template>
<style scoped>
👇
.my-root {
/* CSS custom properties */
}
.badge {
/* styles using the CSS custom properties above */
}
</style>
On the other hand, if you really are trying to add CSS custom properties to the document root from within <style scoped>, you can use the :global() pseudo-class function on :root:
<style scoped>
:global(:root) {
/* CSS custom properties */
}
.badge {
/* styles using the CSS custom properties above */
}
</style>
demo 1
Or a separate global <style> block just for :root:
<style>
:root {
/* CSS custom properties */
}
</style>
<style scoped>
.badge {
/* styles using the CSS custom properties above */
}
</style>
demo 2
How can I target the underlying html textarea of a vuetify v-textarea with css? In my case I want to change the line-height, font-family, color and more of the v-textarea. It doesn't work like this:
<v-textarea class="custom-textarea"></v-textarea>
.custom-textarea {
line-height: 1;
color: red;
}
I also tried several other selectors like v-textarea, .v-textarea, v-text-field__slot but none of these worked either. What is the right selector for the textarea?
In order to override a deep element, you need to access the element through deep selectors like
::v-deep .v-textarea textarea
More information about deep selectors
.custom-textarea textarea {
line-height: 1;
color: red;
}
Set id prop of text-area and apply css style by id.
<v-textarea id="input-7-2"></v-textarea>
#input-7-2 {
color:white;
background-color: green;
line-height:1;
}
Codepen demo
I found a way to override .sb-show-main by having a storybook.scss as below.
//.storybook/storybook.scss
.sb-show-main {
background-color: green;
padding: 16px;
margin: 20px;
}
Then simply import it into .storybook/preview.js
import "./storybook.scss";
The problem I'm facing and couldn't understand is that, background-color: green do have effect, but padding & margin seems to be ignored. Wondering if anyone ever modifying sb-show-main?
The default value for padding is 1rem, I would like to change it to 20px instead.
The styles you are trying to overwrite may be using the css !important directive, or may be more specific in their targeting of an element. I always try to be specific first, but otherwise I will use !important as a last resort.
.container header ul li p {
color: blue;
}
// OVERWRITE STYLES
p { /* this wont work, because it's not as specific as the original rule */
color: yellow;
}
.container header h1 ul li p { /* try this first */
color: purple;
}
p { /* otherwise use !important as last resort */
color: orange !important;
}
<div class="container">
<header>
<h1>Logo</h1>
<ul>
<li><p>One</p></li>
<li><p>Two</p></li>
<li><p>Three</p></li>
</ul>
</header>
</div
I have a custom element x-foo which I have defined a custom CSS property on to set the background-color called --xbg.
I use the element with elements of itself as children as so:
<x-foo class="outer">
Outer
<x-foo class="inner">
Inner 1
</x-foo>
</x-foo>
When I set --xbg on the outer, that value overrides the value of the inner element:
x-foo.outer {
--xbg: orange;
}
x-foo.outer x-foo {
--xbg: red;
/* Doesn't work, have to use !important?!?!*/
}
I've used the inspector in Chrome and can see that the child definition indeed is "lower" then the parent.
I have to "force" it to get higher with !important, which then has all sorts of other implications.
x-foo.outer x-foo {
--xbg: red !important;
/* Works */
}
Why is the child not overriding the parent property?
Here's a plunker for this with some more examples:
https://plnkr.co/edit/uZxg7G?p=preview (Only works in Chrome)
Simpler JSBin for other browsers:
http://jsbin.com/wuqobejeci/edit?html,output
the best way to solve this is to say the style only applies to the class contentwrapper from that host down
<style>
:host {
display: block;
}
:host > .contentwrapper {
padding: 1em;
background-color: var(--xbg, yellow);
}
</style>
Like that,
Here is a working Fiddle
The element has lower priority than the class. Try
x-foo.outer {
--xbg: orange;
}
x-foo.outer x-foo.inner {
--xbg: red;
}
Thought this was worth trying just based on Andrew's answer above -- just using the host style alone seems to work:
<style>
:host {
display: block;
padding: 1em;
background-color: var(--xbg, yellow);
}
</style>
https://jsfiddle.net/6tzoacxr/
basically I have already solved my problem, but I would like to understand why I needed to do it how I did it. Therefore I created a short example, available at https://jsfiddle.net/herbert_hinterberger/9x22u934/
Now I wanted to ask why I need to use the !important rule inside
.navbar-brand {
color: #eae8e8 !important;
}
to change the color of .navbar-brand? As of my understanding the custom CSS should overwrite the bootstrap default css rules. But for any reason the bootstrap default CSS rules are applied before the custom CSS rules if I do not use the !important rule. See
Can anybody please explain why I need to use here the !important rule?
Best regards,
Herbert
You don't need to use the !important every time.
The rule is, whatever css comes later is taken. So, if you have
.aClass {
color:red;
}
in red.css
and
.aClass {
color:blue;
}
in blue.css,
and you include blue.css after red.css, the text having aClass will be blue.
You only use !important when you want one rule to override everything else.
Edit: After the OP's comment, the actual answer to this question is this.
In the bootstrap.css file, we have something like:
.navbar-default .navbar-brand {
color: #hashtag;
}
therefore, when you do:
.navbar-brand {
color: #newHashtag;
}
it doesn't change the color of .navbar-brand that is invoked by .navbar-default (You use this class through .navbar-default in your HTML). Here, .navbar-brand is a descendant of .navbar-default. But, when you put in the !important, it tells all .navbar-brands to change color.
So, if you do want to change the color of your .navbar-brand, try something like:
.navbar-default .navbar-brand {
color: #newHashtag;
}
For more information, read up on descendant selector combinators in CSS.
When you want to overwrite bootstrap CSS with your own, you need to include your custom CSS after bootstrap.
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
This is because the css selector bootstrap is using '.navbar-header .navbar-brand' has more specificity than yours '.navbar-brand'
see this http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
and try this
.navbar-header .navbar-brand {
color: #eae8e8;
}
Here is the best explanation for your Question
CASE: 1
<!-- HTML -->
<div class="blue box"></div>
/*CSS*/
div {
height: 200px;
width: 200px;
}
/*The Battle*/
.blue {
background-color: blue;
}
.box {
background-color: red;
}
In the Battle how wins? obviously last one i.e
.box {
background-color: red;
}
Background color red applied to div
Other Anwsers explain this case, writing custom css file after the bootstrap.css, it override bootstrap Styles
CASE: 2
ID vs. Class
<!-- HTML -->
<div class="box" id="box"></div>
/*CSS*/
div {
height: 200px;
width: 200px;
}
/*The Battle*/
#box {
background-color: blue;
}
.box {
background-color: red;
}
How Wins? obviously id Win, Id is declared as winner according to Rules of Specificity
Scores of elements according to specificity
inline-style = 1000 points (decided by css Specificity)
ID’s are worth a 100 points.
Classes are worth 10 points.
Elements are worth 1 point.
Example:
#content .sidebar .module li a{}
Score is :
#content =100; .sidebar, .module = 10 +10; li, a = 1+1
Total: 122
If we add one id at front as below We can overrides above mentioned style because the score of below mentioned style is 222
#main-container #content .sidebar .module li a{}