I want to adjust the style for an element inside shadow root. The problem is, that I need to target the class.
HTML inside DOM
<menu-flyout-item>
#shadow-root
<div class="menu-flyout-item" part="base">...</div>
</menu-flyout-item>
Style for the class menu-flyout-item inside HTML DOM
.menu-flyout-item {
padding: 0 10px;
}
Targeting scale-menu-flyout-item > div::part(base) as well as scale-menu-flyout-item > .menu-flyout-item won´t change the padding.
Do you have any advice how to target the class inside shadow div element?
Related
here is the simple html sample:
<div class='parent'>
parent div
<div class='myDiv'>
child div
</div>
</div>
I want change child div style based on parent property style. I do not want to use #media for child. But e.g. once parent changes its background color to something specific then I want change child background color, e.g. change child background only if parent changed to RED. Is that possible?
Yes, but neither with CSS or Sass, since Sass is based on CSS and the latter does not support conditional statements (yet). You will have to use Javascript instead.
You can however apply a certain styling to a descendent if a certain selector matches the parent.
// HTML
<div class="red">
Parent
<div>
Child
</div>
</div>
// SCSS
.red {
background-color: red;
> div {
color: green;
}
}
https://codepen.io/LudwigGeorgImmanuel/pen/abmPJmZ
I have a div with class fview.iNside I have a span. Then I have anchor elements inside another span, ul li, another div etc.
I need same style for all anchor elements.
I have used Font-size and color to the class . But the color is not getting updated. Font size is working fine.
The div is dynamic one. So I cant define it as it is.
<div class="fview"><span>
{{Inside i can have any html elemnts like span, div, a, ul, li }}
</span></div>
.fview span a {
color:red;
font-weight : bold
}
I need the color change to all elements inside fview span. Please help me
Please add the following css in your stylesheet and check
Try this:
.fview span a {
color:red !important;
font-weight:bold !important;
}
Also inspect the element and check if any other css not overwriting this.
Note:
The span is a inline element so you should not add any block level element inside it.
If you are using a > h2 etc the it will be incorrect.
But if you can't update the HTML then try to convert the inline element to block using css it will reflect the design.
display: block; // inline-block
Let me know if still you are facing the issue.
.fview span h4 {
color:red ;
font-weight : bold
}
<div class="fview"><span>
<h4 >Example</h4>
</span>
</div>
I think thats what you want.Please check this code. I hope this works for you :)
Is it still possible to add the align attribute to a HTML element to align the element itself? So that it's not set via CSS but in the element tag itself, something like this:
<div align="center"></div>
Will this still center it, or will the attribute just be ignored?
As Mike W pointed out in the comments:
The align attribute is deprecated in HTML 4, and removed in HTML 5.
Don't use it: use CSS instead.
That being said, here are some ways to center it anyway, even though you say you have more elements with that class.
Give this specific element inline style:
<div class="main" style="margin: auto;">
Be more specific in your CSS. The element is probably a child of an element that does not have any other .main babies, so you can specify this element by using the parent element in CSS:
.parent-class > .main {margin: auto;} /* If the parent has a class */
#parent-id > .main {margin: auto;} /* If the parent has an ID. This one is prefered, to avoid misunderstandings */
If the above is not the case, and there are multiple instances of .main within a single parent, you can use the nth-child selector (or first-child or last-child). For instance, if the element you want to center is the third child within the parent element, use this code.
.main:nth-child(3) {margin: auto;}
why dont you use
<div class="main" style="margin:0 auto;">
i'd like to prevent CSS from my styles do descendants of descendants without giving them classes or ids? my jQueryUI widget are affected by my ascendant CSS.
i've tried
For instance:
.myClass > ul {...} instead of .myClass ul {...}
but it doesn't work (checked with Firebug 1.5/FF 3.6)
.myClass MUST BE a class, not an id (#). It seems to work with id, but that's not what i want..
In fact, i'd like something to 'contain' CSS jQueryUI Widget.
Thanks from your help.
Sebastien
Usually jQueryUI Widgets are wrapped inside a DIV that has a class such as .ui-widget, however those are usually at level of a first child of the body, meaning if you have your layout in something like a #wrapper div, the widgets styles won't be affected be descendant selectors coming from that wrapper, to make things clear:
<body>
<div id="wrapper"><h1>an h1 inside the wrapper</h1></div>
<div class="ui-widget"><h1>h1 inside the jquery ui widget</h1></div>
</body>
So if you do put #wrapper in front of all your styles jQueryUI won't pick them up.
Can i change parent class of some dom object on hover event via CSS selectors?
For example I have such block:
<span class="wBlock" >
<span class="wText">Text</span>
<span class="wLink"/>
<\/span>
and if i move mouse to span "wLink" span "wBlock" must be changed, and if i move out than it must be the same as at the begining
.wLink{
padding-right:15px;
background:url(/img/addlink.png) center right no-repeat;
cursor:pointer;
}
.wText{
background-color: #1BE968;
}
It's something like this alt text http://img192.imageshack.us/img192/5718/capturehlk.jpg and if i move my cursor to plus text highlight must be changed to yellow
I belive you can't do that in CSS.
I would advise to restructure your HTML so you dont end up using JS hacks to apply styles.