I want to fix some styling of a component which I'm importing. The component uses its own shadow root (I think), and inside of that shadow root is the div I want to add some styling to.
Now I've tried using :host(), and :host-context(), but for some reason it's not being selected. When I select the custom element itself, it does add some styling. However, I don't want to add styling to the custom element, but to an element inside of it.
Below is a screenshot of the custom element, folded open in the inspector in Chrome:
I want to add some styling to the div with class .mb-1. Does anyone know which selector I should use?
You can't do this for while, there are a nice explanation about here:
Is there a CSS parent selector?
As you, i'd like this feature, but isn't available.
Related
How can you change the css of a specific div even if a bunch of parent divs do not have ids? You can do
#someid>div>div>div>div>div
and I tried that, but it changes all the applicable divs at that level, not the one I want only. say there is ten divs that parent one div i want, and i use css like that to change the color. But there is another one of the same generation ( a sibling is it called) that also gets affected. imortant: there are no ids until that tenth one
first of all if you didn't share your code it's hard to find any solution. But Still if you're facing issue with CSS you can try inline CSS which will help you to achieve your goal. Inline CSS Like-
<div style="width:50%; text-align:center; justify-content:center;">Hello Josh</div>
In the above code style is inline CSS.
enter image description here
Basically, I have a react app which is consist of little compoennts like menu home random(its a program), and every child has its own css. but when I write css for home it works in every child. for example when I wrtie div 50px every div in my app becomes 55px. Is there any way to stop this behavior?
I gather this is your first time using css :)
Using an html selector (like div or h1) will target every element of that type. Targeting a class will target every element containing that class, and targeting an id will target the one element of that id.
Read more about selectors here: https://www.w3schools.com/cssref/css_selectors.asp
I'm using bootstrap for most of the page, but I'd like to use custom css in a div.col to get a nicer looking table, but the bootstrap css is affecting some of the styles.
I'd like to reset all the styles for a specific div and it's children.
Are there any ways of dealing with this other than explicitly overloading every style bootstrap uses?
To reset all the styles for a specific div, you can add the 'all: unset;' CSS property.
<div style="all: unset;">...</div>
This will undo ("unset") all the styles currently applied to that div (but not it's children), leaving you to add which ever ones you desire.
See it in action here (including how to apply to all child elements):
http://codepen.io/esr360/pen/kkogwm?editors=1100#0
This is a bootstrap accordion that has been "unstyled".
View browser support here: http://caniuse.com/#feat=css-unset-value
Unsurprisingly this doesn't work in IE.
jQuery mobile and jQuery UI wrap your elements with their own elements. Sometimes those wrapper elements have a :hover rule. If, for whatever reason, you don't want the hover rule to trigger what can you do?
an anti :hover class which keeps the element how you want it during hover
putting a div over top of the element
The problem is the anti-class will fail if you apply theming. You can build the class with getComputedStyles and Javascript but for some reason that only seems to preserve about 90% of the desired style.
The problem with the div over top is that :hover still gets triggered on the underlying div when the mouse touches the corner of the overlying div.
Create a newer more specific :hover selector for the element that undoes any CSS changes. You can read up on specificity, but the fastest way is normally to add an additional ancestor but keeping the rest of the selector.
For instance if the present selector is something like .jquery-ui-dialog .jquery-ui-button:hover {...} then adding a parent in like body .jquery-ui-dialog .jquery-ui-button:hover {...} will provide more specificity and thus override any conflicting rules.
Is there a way, in CSS, to select a div inside another that contains a specific child like this:
I know it can be done using jQuery, but i'm looking for a way to do it ONLY using CSS.
This is not possible with plain CSS
You can only make rules where the selectors are parents, whereas your anchor is not a parent of .content.clearfix
This can be done using jQuery however. Heres an example:
http://jsfiddle.net/Curt/b95TB/