Does anybody know how to use :host (or :host()) with :has() ?
For example something like this:
:host:has([disabled]) {
opacity: 0.75;
}
or
:host(:has([disabled])) {
opacity: 0.75;
}
With the syntax from my example the opacity is not applied.
In CSS, if you want to select a child of the pseudo-class :host. You can put a space between the two pseudo-classes as such :host :has([disabled]). It will select an element that is the child of :host and will have the disabled state.
Related
I would like to make a CSS module index.module.css as follows which will be only used by App component :
.my-class {
color: red;
}
label {
color: blue;
}
In App.js I use import style from "./index.module.css"; to import it, whereas Bpp.js does not import ./index.module.css.
Then, I realize that my-class in Bpp does not apply color: red;, which is expected. However, label in Bpp does apply color: blue; which is not what I wanted.
Here is the code: https://codesandbox.io/s/small-pine-6cpxcx?file=/src/App.js
Note that the css became ._src_index_module__my-class { color: red; } label { color: blue; }, where label did not change:
Does anyone know if it is possible to privatize label {color: blue} only for the App component so as to prevent it from being applied to other components?
CSS module's can't privatize styles created on element types, you will need to assign your element a class, or select the element type as a descendant of some class that can be privatized.
Add these elements into another div with an id selector. Then give style with catching with div as giving styles to children.
after that, Give all property values as !important inside the app component which you are going to styles
#{div id selector name} > {element name} {
property: value !important;
}
The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.
if you need more details of child combinator in CSS refer this link
Child combinator
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
Having the following App.component.ts
<app-title-bar></app-title-bar>
<app-navigation-bar></app-navigation-bar>
<div id="app-content">
...
</div>
How could I apply the property visibility: hidden to the element #app-content if an element of the app-navigation-bar is hovered ?
If the components were merged in a single component, I could simply do
#nav-bar:hover #app-content{
visibility: hidden;
}
Unfortunately the component style isolation and encapsulation prevents to do it.
Any solution using :host or :host-context? I still don't think these features are appropriate..
You can use the direct sibling (+) or general sibling (~) selector like this:
#nav-bar:hover + #app-content {
display: none;
}
demo here: https://codepen.io/malejpstros/pen/VwZaeRO
more about the selectors here: https://www.w3schools.com/css/css_combinators.asp
As :host access now is treated to be deprecated, the only way is to set boolean variable into the EventEmitter() in #Output() parameter of app-navigation-bar. Then change it inside onHover() event.
Then change app-component visibility according to this value.
You can use css
app-navigation-bar:hover #app-content{
visibility: hidden;
}
in your style.css or app.component.css
Try to write the following code in your shared.css file:
app-navigation-bar:hover #app-content{
visibility: hidden;
}
An approach 1. In your parent component:
app-navigation-bar:hover ::ng-deep #app-content {
visibility: hidden;
}
An approach 2. This code should be placed in child component:
:host-context(app-navigation-bar:hover) #app-content {
visibility: hidden;
}
UPDATE:
Try to set into your App.component.ts:
#Component({
selector:'test-component',
...
encapsulation: ViewEncapsulation.None // <------
})
and CSS:
app-navigation-bar:hover #app-content{
visibility: hidden;
}
I have a component called accordion-next. This component can be see as a template. I have a component called accordion-toto. This second component is using accordion-next. it is a kind of a filler for the template.
if accordion-next was an interpolated string it would be:
`<a href>${content}</a>`
and accordion-toto would be:
content = "<div><div><span class="caret">▼</span></div></div>"
so accordion-toto will print
<a href><div><div><span class="caret">▼</span></div></div></a>
ok. Now, I want to add some scss to accordion-toto. This scss is
a:hover .caret,
{
color: red;
}
Of course it doesnt work. I try to use :host, :host-context, :host(:hover), :host-context(:hover) then /deep/ and a mixed of all of this. What case did I missed?
You can see the following Stackblitz for a complete example:
Stackblitz complete demo
Relate to: How to edit a ng-template to use my HTML?
Edit: I use to have rotate issue. Thank you #Shadowlauch for pointing it. My problem is still here with a 'basic' attribute.
You got the incorrect combinators. Try using the code below. You also need to set the display property to inline-block so that the rotation does work (it does not work on inline elements, as pointed by Shadowlauch's comment)
:host ::ng-deep [aria-expanded="true"] .caret,
{
display: inline-block;
transform: rotate(0deg);
}
:host ::ng-deep [aria-expanded="false"] .caret
{
display: inline-block;
transform: rotate(90deg);
}
Stackblitz demo
You need to use "display: block" for the span element in order to rotate, because span is an inline-element
I have always wonder why this wouldn't work as it would make so much sense.
CSS:
#button1:hover {
background: green;
#button2 {
background: red;
}
}
HTML
<button id="button1"></button>
<button id="button2"></button>
If I hover over Button1, Button2's background should also change.
Is there a workaround to this other than the use of Javascript?
You can use the adjacent selector,
#button1:hover {
Background: green;
}
#button1:hover + #button2 {
Background: red;
}
Have a look at all the css selectors: http://css-tricks.com/almanac/
Oh by the way it's only possible to apply css on hover to elements after the hovered element. Parent elements and elements before the hovered element cannot be styled with css on hover. It's a limitation of css.
This can be done but CSS lacks the ability to provide powerful conditional statements. However if you look into SASS CSS LESS it is starting to happen.