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.
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.
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.
I'm implementing an amp-user-notification element on an AMP-compliant page. My use case is slightly different than its recommendation: rather than a cookie dismissal prompt, I'm attempting to use it for a dismissible banner notification.
The element itself works as expected, including the use of a button to dismiss the notification. However, I want to adjust the layout so that it's static on the page, rather than a fixed-position element.
While I can adjust some CSS properties, position: fixed is added to the amp-user-notification element with !important declared on Google's end, and since AMP doesn't support the use of !important in my own custom CSS, I'm unsure of how to adjust this.
Is there a way to use amp-user-notification while not making the element sticky?
Bootstrap comes with a set of nice styles for a table.
I however need that same style but for a div with table-like content.
I took a look at the css and there's a complicated hierarchy of css selectors that target each tag of the the table. I could update the bootstrap css to target my div but that is messy.
Is there no quick way to apply bootstrap css table styles to my div with .row and .cell inner divs?
There are a copious amount of other libraries you can utilize that are much smaller and minimalistic in size.
One of the slimmest variations I've used in the past would be the:
960 Grid System
Make a custom CSS file here, without all of the extra necessities of bootstrap.js.
http://grids.heroku.com/
Learn More:
http://960.gs
It's not exactly a table system, but you can just create full length rows and chalk it up the same way.
See here: http://grids.heroku.com/fluid_grid?column_amount=5
Using Zurb's Foundation, I'm attempting to add my own styles to the navbar, which is working great. Unfortunately, Zurb's responsive navbar changes its look when the viewing container becomes smaller. When it does this, it adds a second class to the nav element.
Before responsive change:
<nav class="top-bar">
After responsive change:
<nav class="top-bar expanded">
My custom styles look terrible for this expanded navbar, and I was wondering if there was a way to only apply styles when an element contained solely 1 class and not multiple. I know it's very easy to only apply styles when an element has two or more classes, but can you exclude one?
Thanks!
You can use this selector for your style in css:
.top-bar:not(.expanded){
//your style
}
One option is to apply those styles for top-bar within an #media rule that only applies them down to a minimum screen width. That minimum width would, of course, be the width at which the expanded styles kick in.