I came across the clearfix implementation below.
What could be the reason for the choice of the attribute selector (div[class="foobar"])? I cannot figure out any good reason for it. Why didn't the author use div.foobar?
div.foobar:after {
content: " . ";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
div.foobar {
display: inline-block;
}
div[class="foobar"] {
display: block;
}
* html div.foobar {
height: 1%;
}
Related
Just found out about and tags. Default gives out a very crude style. I had success using the ::marker Pseudo Element to remove the default marker, but don't know how to put it on the right side. Used the ::after Pseudo Element but can't animate it (Rotate 180deg or scale it) when the summary "opens". Is there a proper way to do it? Or did I miss anything with my method? Thanks.
PS: Since I am a newb, I don't know how to get the Google icon font to the codepen. However, you will see what I tried to do with the expand_arrow icon.
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
.thing {
background-color: cadetblue;
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.new_game {
font-size: 3rem;
}
.what_is_question {
background-color: cornflowerblue;
cursor: pointer;
}
.what_is_question[open] {
background-color: darkmagenta;
}
.what_is_question {
font-size: 5rem;
}
.question_title {
position: relative;
}
.question_title::after {
content: url(./images/expand_more_black_24dp.svg);
}
.what_is_question[open] .question_title::after {
transform: rotate(180deg);
}
.question_title::marker {
content: none;
}
.answer {
background-color: darkkhaki;
font-size: 3rem;
padding-left: 3.5%;
}
<div class="thing">
<h1 class="new_game">QnA</h1>
<details class="what_is_question">
<summary class="question_title">What is the question?</summary>
<p class="answer">The question is the answer.</p>
</details>
</div>
https://codepen.io/consig1iere/pen/bGWXRMW
The problem is that you can't apply transforms to elements with display: inline.
So add display: inline-block; to your .question-title
.what_is_question[open] .question_title::after {
display: inline-block;
transform: rotate(180deg);
}
Is this how it would be written, to push two floats together?
https://jsfiddle.net/ocjs81Lf/5/
.container-top {
position: relative;
height: 310px;
padding: 0 20px;
}
.container-left-video {
margin: 0;
float: left;
}
.container-right-video {
float: right;
}
Margin would work here also.
https://jsfiddle.net/jc90fpzw/2/
.container-left-video {
float: left;
margin-left:20px;
}
.container-right-video {
float: right;
margin-right:20px;
}
Yes, It is a correct way to float two containers in one parent container but when you use float you need to clear them or it will overflow and ruin your design. You can add this clearfix class on container-top because it is parent of the div which are floating.
.clearfix::after {
display: block;
content: "";
clear: both;
}
I have a css and i want to put all the rules in css relative to an id.
For Example:
I have
.clearfix {
clear: both;
display: block;
font-size: 1px;
height: 0;
line-height: 1px;
margin: 0;
padding: 0;
}
And I have to make it like
#vn_space .clearfix {
clear: both;
display: block;
font-size: 1px;
height: 0;
line-height: 1px;
margin: 0;
padding: 0;
}
Is there any simple method to put all css rules relative to one id instead of editing each rule
You can use inheritance for second rule.
E.g. clear: both in .clearfix will apply to rule #vn_space .clearfix. So in #vn_space .clearfix you can omit anything that is same in rule .clearfix.
.clearfix {
background-color: red;
width: 20px;
height: 20px;
}
#vm_space {
padding: 5px;
background-color: green;
}
#vm_space .clearfix {
border: 1px solid black;
}
<div class="clearfix"></div>
<div id="vm_space">
<div class="clearfix"></div>
</div>
if you want to do this any how then you can use it like
$('div').css(["#vn_space", ".clearfix"]);
but i would not suggest it to prefer you can do this css with other way
here is ref link where i found
Is it possible to reference one CSS rule within another?
I tried to search for an answer to this both within Google, and on this website.
I have a website that needs to be made responsive. It's relatively intricate, but it's definitely possible with the design we currently have.
My question is this. Is there a responsive grid system, or an example of a fully responsive grid system that does NOT rely on box-sizing: border-box. After looking at Pure & Bootstrap, it seems both rely on that property to make it work.
When thinking about it in practice, it seems to me that a box-sizing:border-box model would be required to allow the use of percentages appropriately.
Why am I unable to use this method? Support of IE7 is absolutely required for this project. I know there are polyfills and htc files that can be used to force support, however, the scale and size of this site makes these options hard to implement. From what I've read, these options should be used in moderation, and a site of this caliber, it just couldn't be used in moderation.
Thanks.
In Twitter Bootstrap 3 you can remove the box-sizing in line 293.
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Just remove this and in input declaration :)
Here is an example of the Bootstrap 2.3.x grid only using it mobile first, it kicks in at the 768 min width, you can change this value. To get this to be seen by IE7 and IE8 use Respond.js and make sure you read their docs. Basically you need to locally link (relative path) to the CSS for Respond.js.
This does not rely on box-sizing:border-box.
#media (min-width: 768px) {
[class*="span"] {
float: left;
min-height: 1px;
margin-left: 20px;
}
.row {
width: 100%;
*zoom: 1;
}
.row:before,
.row:after {
display: table;
content: "";
line-height: 0;
}
.row:after { clear: both }
.row [class*="span"] {
display: block;
width: 100%;
min-height: 30px;
float: left;
margin-left: 2.7624309392265194%;
*margin-left: 2.709239449864817%;
}
.row [class*="span"]:first-child { margin-left: 0 }
[class*="span"].pull-right,
.row [class*="span"].pull-right { float: right }
.row .span12 { width: 100% }
.row .span11 { width: 91.43646408839778% }
.row .span10 { width: 82.87292817679558% }
.row .span9 { width: 74.30939226519337% }
.row .span8 { width: 65.74585635359117% }
.row .span7 { width: 57.18232044198895% }
.row .span6 { width: 48.61878453038674% }
.row .span5 { width: 40.05524861878453% }
.row .span4 { width: 31.491712707182323% }
.row .span3 { width: 22.92817679558011% }
.row .span2 { width: 14.3646408839779% }
.row .span1 { width: 5.801104972375691% }
.row .offset12 { margin-left: 105.52486187845304% }
.row .offset12:first-child { margin-left: 102.76243093922652% }
.row .offset11 { margin-left: 96.96132596685082% }
.row .offset11:first-child { margin-left: 94.1988950276243% }
.row .offset10 { margin-left: 88.39779005524862% }
.row .offset10:first-child { margin-left: 85.6353591160221% }
.row .offset9 { margin-left: 79.8342541436464% }
.row .offset9:first-child { margin-left: 77.07182320441989% }
.row .offset8 { margin-left: 71.2707182320442% }
.row .offset8:first-child { margin-left: 68.50828729281768% }
.row .offset7 { margin-left: 62.70718232044199% }
.row .offset7:first-child { margin-left: 59.94475138121547% }
.row .offset6 { margin-left: 54.14364640883978% }
.row .offset6:first-child { margin-left: 51.38121546961326% }
.row .offset5 { margin-left: 45.58011049723757% }
.row .offset5:first-child { margin-left: 42.81767955801105% }
.row .offset4 { margin-left: 37.01657458563536% }
.row .offset4:first-child { margin-left: 34.25414364640884% }
.row .offset3 { margin-left: 28.45303867403315% }
.row .offset3:first-child { margin-left: 25.69060773480663% }
.row .offset2 { margin-left: 19.88950276243094% }
.row .offset2:first-child { margin-left: 17.12707182320442% }
.row .offset1 { margin-left: 11.32596685082873% }
.row .offset1:first-child { margin-left: 8.56353591160221% }
}/* end min-width */
I want a new <div> to appear on thumbnail hover.
You can inspect my code on http://techgeek.lt/naudinga/
This works:
#main:hover .whitewrapper {
display: block;
}
but it hovers on #main.
I already tried (and no luck):
img.thumbnail:hover .whitewrapper {
display: block;
}
#main img.thumbnail:hover .whitewrapper {
display: block;
}
.thumbnail:hover .whitewrapper {
display: block;
}
img.thumbnail:hover .whitewrapper {
display: block;
}
img.thumbnail .alignleft:hover .whitewrapper {
display: block;
}
.thumbnail .alignleft:hover .whitewrapper {
display: block;
}
#main.thumbnail .alignleft:hover .whitewrapper {
display: block;
}
#main.thumbnail .alignleft img:hover .whitewrapper {
display: block;
}
.thumbnail .alignleft img:hover .whitewrapper {
display: block;
}
.thumbnail img:hover .whitewrapper {
display: block;
This works:
.post-more a:first-child:hover ~ .whitewrapper, .whitewrapper:hover {
display: block;
}
Both :first-child and the general sibling combinator (~) are supported in IE7+ and all modern browsers.
You need to fix that first a in each post:
<div class="post-more">
<a href=".." onclick=".."<a title=".." href=".." >..</a></a>
that's broken HTML, which causes the selector I've provided to fail in some browsers.
You may be able to use the + selector type.
If the div comes directly after the img, this should work:
img.thumbnail:hover + .whitewrapper {
display: block;
}
Update: I tested it and it works for me. Here's the jsfiddle.