Style child element when hover on parent
Yes, you can definitely do this. Just use something like .parent:hover .child { /* … */ } According to this page it’s supported by all major browsers.
css
Is there a CSS selector by class prefix?
It’s not doable with CSS2.1, but it is possible with CSS3 attribute substring-matching selectors (which are supported in IE7+): div[class^=”status-“], div[class*=” status-“] Notice the space character in the second attribute selector. This picks up div elements whose class attribute meets either of these conditions: [class^=”status-“] — starts with “status-“ [class*=” status-“] — contains the substring … Read more
How to align an image dead center with bootstrap
Twitter Bootstrap v3.0.3 has a class: center-block Center content blocks Set an element to display: block and center via margin. Available as a mixin and class. Just need to add a class .center-block in the img tag, looks like this <div class=”container”> <div class=”row”> <div class=”span4″></div> <div class=”span4″><img class=”center-block” src=”logo.png” /></div> <div class=”span4″></div> </div> </div> … Read more
CSS 3 slide-in from left transition
You can use CSS3 transitions or maybe CSS3 animations to slide in an element. For browser support: http://caniuse.com/ I made two quick examples just to show you what I mean. CSS transition (on hover) Demo One Relevant Code .wrapper:hover #slide { transition: 1s; left: 0; } In this case, I’m just transitioning the position from … Read more
Change bootstrap navbar collapse breakpoint without using LESS
2018 UPDATE Bootstrap 4 Changing the navbar breakpoint is easier in Bootstrap 4 using the navbar-expand-* classes: <nav class=”navbar fixed-top navbar-expand-sm”>..</nav> navbar-expand-sm = mobile menu on xs screens <576px navbar-expand-md = mobile menu on sm screens <768px navbar-expand-lg = mobile menu on md screens <992px navbar-expand-xl = mobile menu on lg screens <1200px navbar-expand = … Read more
Why put in front of the file name “_” or “_” in scss/css?
The _ (underscore) is a partial for scss. That means the stylesheet its going to be imported (@import) to a main stylesheet i.e. styles.scss. The advantage on using partials is that you can use many files to organize your code and everything will be compiled on a single file.
Div height 100% and expands to fit content [duplicate]
Here is what you should do in the CSS style, on the main div display: block; overflow: auto; And do not touch height
Stopping a CSS3 Animation on last frame
You’re looking for: animation-fill-mode: forwards; More info on MDN and browser support list on canIuse.
Center content in responsive bootstrap navbar
I think this is what you are looking for. You need to remove the float: left from the inner nav to center it and make it a inline-block. .navbar .navbar-nav { display: inline-block; float: none; vertical-align: top; } .navbar .navbar-collapse { text-align: center; } http://jsfiddle.net/bdd9U/2/ Edit: if you only want this effect to happen when … Read more
How to style a div to be a responsive square? [duplicate]
Works on almost all browsers. You can try giving padding-bottom as a percentage. <div style=”height:0;width:20%;padding-bottom:20%;background-color:red”> <div> Content goes here </div> </div> The outer div is making a square and inner div contains the content. This solution worked for me many times. Here’s a jsfiddle