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
Related
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.
This problem is easier seen than described. See here: jsFiddle
To get a clearer understanding of what is going on, I have updated the fiddle to include a class .ui-sortable-placeholder to be visible and red. This is the class of the jQueryUI (normally) invisible element involved with the sortable. As seen here: http://jsfiddle.net/rLW9m/9/. Thanks to George for pointing that out in his answer. With this answer we can probably consider this resolved as far as the "what" but perhaps the "why" is still TBD.
Of the three scenarios shown, they all apply float:left to the LI elements but the final one behaves poorly; in the last bunch of sorted items, clicking on the first or second item "drops" the rest of the list beneath the row they were just in (and the item clicked).
The scenario is exhibited when the float:left CSS is applied directly to my <li>s using inline styling versus applying the same change via a css file. Is this a jQueryUI bug?
When I apply the CSS to my elements in the identical way to how jQueryUI's documentation shows (the first example in the jsFiddle), then the sorting occurs just fine. However, once the same CSS (as far as I understand it) is applied directly to my list items, then sorting behavior is erratic as described above.
The way to get jQueryUI to sort nicely in a grid is to apply the float only in your CSS file using classes or other mechanisms:
/* Starting from UL descriptor with LI descendants */
.ulClass li {
float:left;
}
/* or directly to LI element but still via CSS file */
.makeTheseLIsSortable {
float:left;
}
/* DOES NOT WORK properly to directly apply CSS
(items to the right are shifted below when items on left selected) */
<ul id='makeSortable'>
<li style='float:left'>test</li>
<li style='float:left'>three</li>
</ul>
Why are these two CSS applications handled so differently by jQueryUI? When it is rendered, it sure seems like the list elements themselves are float:left either way. What is your take? Why can't I apply the CSS directly to the list elements and get the same, expected behavior?
EDIT: Thanks to George, I now have a better understanding of what is going on. There are probably some really good reasons that jQueryUI doesn't copy down the element inline styles to their "placeholder element" but they do pass along class details. If a jQueryUI pro shows up later and considers this a bug then I'm glad to have reported it. Until then, be sure to apply your sortable element's float via a class! Can you explain why the inline styling is not included into the placeholder?
The problem is the place holder that jqueryUI inserts does not have a float left style on it. jQueryUI duplicates the element type and the classes on an item you are sorting for the place holder but it would appear it does not duplicate the inline styles.
I'm using jqUI to build an app with a content pane and side-menu.
When the page is showing the list, I want to hide some of the menu content, but when the page is showing an item, I want to show the menu content.
I've created a pretty basic jsfiddle as an example http://jsfiddle.net/pq83M/8/
I DON'T want to do this in javascript, as the page transitions are in the jqui library and I don't think it's effective to listen for this specific transition separately fro the others.
What I am hoping to figure out is a way of saying
when
div#content > div#list_item.active ~ div#menu > div#list_item_details {
display:block;
}
with the caveat that the ~ is looking for the sibling of div#content, not the sibling of div#list_item.active.
I'm using Sass, so those custom selectors are available.
If I understand your question correctly, you want to find siblings based on the parent (div#content) but only start with particular parents depending on their children (div#list_item.active).
If so, it's not possible in CSS Selector Level 3, but it's coming in CSS Selectors Level 4; you'll be able to select the subject of your operation/comparison. http://dev.w3.org/csswg/selectors4/#subject
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/