HTML
<div>
<div></div>
</div>
CSS
div > :first-child:after {
background-color: orange;
color: #fff;
font-family: sans-serif;
font-size: 50px;
line-height: 50px;
text-align: center;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
content: "hello world";
display: block;
font-size: 50px;
height: 160px;
line-height: 160px;
margin-top: 14px;
font-weight: normal;
}
div > :first-child:after:hover {
background-color: #44b800;
}
Fiddle
http://jsfiddle.net/VSBr6/
Basically, all I want to do is change the background-color on hover but it doesn't seem to work.
You can do it like this:
div:first-child:hover::after {
background-color: #44b800;
}
Related
How to get the text wrapped under the points?
https://codepen.io/neginbasiri/pen/ZEGReRZ
<div class="pointLine__PointLine-wgyo1p-1 bUhvVh">
<svg class="icon--icon--base--17 pointLine__RooIcon-wgyo1p-0 iBQvHK">IMAGE</svg>
<div class="pointLine__Content-wgyo1p-2 cPwDGx"><div class="pointLine__Point-wgyo1p-3
pointLine__DefaultPoint-wgyo1p-4 enMiay">16,000</div><p class="Text__StyledText-zy9rxk-0 dufgDt">
Points when you join or switch <span id="super-node-187"><sup class="super--super--root--13">
<span>3</span></sup> </span></p></div>
In the example switch should show under 16,000.
.bUhvVh {
display: flex;
margin-bottom: 20px;
width: 300px;
}
.iBQvHK {
color: #e40000;
font-size: 24px;
margin-right: 10px;
border: 1px solid red;
width: 20px;
}
.icon--icon--base--17 {
height: 1em;
min-width: 1em;
vertical-align: middle;
fill: currentColor;
}
.cPwDGx {
font-family: Ciutadella Regular;
font-size: 18px;
color: #555;
letter-spacing: normal;
line-height: 1.5;
}
.enMiay {
float: left;
font-family: Ciutadella Medium;
margin-right: 4px;
position: relative;
color: #323232;
}
.dufgDt {
margin: 0;
font-family: 'Ciutadella Regular',sans-serif;
font-size: 18px;
color: #555;
letter-spacing: normal;
line-height: 1.5;
}
<div class="pointLine__PointLine-wgyo1p-1 bUhvVh">
<svg class="icon--icon--base--17 pointLine__RooIcon-wgyo1p-0 iBQvHK">IMAGE</svg>
<div class="pointLine__Content-wgyo1p-2 cPwDGx"><div class="pointLine__Point-wgyo1p-3 pointLine__DefaultPoint-wgyo1p-4 enMiay">16,000</div><p class="Text__StyledText-zy9rxk-0 dufgDt"> Points when you join or switch <span id="super-node-187"><sup class="super--super--root--13"><span>3</span></sup> </span></p></div>
</div>
Remove display: flex; flex: 1 from .cPwDGx.
Remove display: inline-block from .enMiay and add float: left for this element.
Update width to min-width for icon--icon--base--17. It will not shrink if text is larger.
Refer : https://codepen.io/bala_tamizh/pen/WNvyEPg
Here is a snippet from some generated html I am trying to style. Why does the date align to the top but the link inside the h3 doesn't?
Using dev tools I can see the link is centrally aligned to the h3 vertically but I cant alter it in any way I have tried with vertical-align or by adjusting height.
article {
width: 400px;
}
article .date_posted {
float: right;
font-size: 12px;
}
article div.thumbnail {
margin-right: 10px;
width: 100px;
height: 75px;
float: left;
box-shadow: 0 0 0 4px #fff, 0 0 0 5px red;
vertical-align: text-top;
}
article div.title h3 {
display: inline;
}
article div.title h3 a {
font-size: 14px;
font-family: Lato, sans-serif;
font-weight: 900;
color: red;
}
article:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
<article>
<div class="uposts-part thumbnail" data-resize="1">
<img width="288" height="230" src="http://site3.wpmu-subdomain.dev/wp-content/uploads/sites/3/2015/10/0f02bd48-7efe-3934-8f4b-093c81560333.jpg" class="attachment-post-thumbnail wp-post-image" alt="" style="margin-top: -2.5px; height: auto; width: 100%;">
</div>
<div class="uposts-part date_posted">
<span class="date">23</span>, <span class="time">October</span></div>
<div class="uposts-part title">
<h3>Dignissimos deserunt fugiat at sdfsfsd sdfsd s fsdf s ds fds df sdf sdf sd f sd fsd d</h3>
</div>
</article>
JS fiddle: https://jsfiddle.net/xdfc8vnm/
article div.title {
float: left;
width: 233px;
line-height: 1
}
article div .title h3 {
display: inline;
margin: 0;
}
article div.title h3 a {
font-size: 14px;
font-family: Lato, sans-serif;
font-weight: 900;
color: red;
display: block;
}
article .date_posted {
float: right;
font-size: 12px;
line-height: 1;
}
For your class: article .date_posted you need to set same Font Family, Font Size and Font Weight that you used on post title. So it should go like this:
article .date_posted {
float: right;
font-size: 14px; /* from 12px changed to 14px */
text-decoration: underline; /* this line added */
font-family: Lato, sans-serif; /* this line added */
font-weight: 900; /* this line added */
}
Here is an example: https://jsfiddle.net/LddvoLaL/2/
I used a css reset where * selector has
vertical-align:baseline;
Entire theme was build with it, and now, at the very end, I need one div to align top. And it does not. I did specify it in styling, added !important. No luck. I'm sure I'm missing something, but can't figure out what.
So
Css reset * selector part looks like this
* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
Html part
php part of wordpress templates
<li>
<div id="datencomments">
<div id="date3">
<div id="datetxt">
<div class="month"><?php the_time('M ') ?></div>
<div class="day"><?php the_time('j ') ?></div>
</div></div>
<div id="comments"><span class="comments-link"><?php comments_popup_link( __( '1 Comment', 'blankslate' ), __( '% Comments', 'blankslate' ) ); ?></span></div>
</div>
</li>
</ul>
</div>
css for it.
.postpreview ul {
list-style: none;
}
.postpreview ul li {
display: inline-block;
}
#datencomments {
width: 100px;
vertical-align: top !important;
}
#date3 {
width:100px;
height: 100px;
border: 2px solid transparent;
border-radius: 100px;
background-color: #17B1BE;
color: #fff;
text-align: center;
}
.month {
text-align: center;
margin-top: 12px;
text-transform: uppercase;
font-size: 24px;
font-weight: 200;
font-family: 'Exo 2', sans-serif;
}
.day {
text-align: center;
margin-top: -8px;
text-transform: uppercase;
font-size: 40px;
font-family: 'Exo 2', sans-serif;
}
#comments {
margin-top: 20px;
text-align: center;
font-size: 12px;
font-family: 'Droid Serif', serif;
font-style: italic;
text-decoration: underline;
}
the rest is transitions, hover colors etc...
I need #datencomments at the top of the template, while * is pulling it down.
If done like this, display:block puts the text behind the box, display:inline puts it inside on top and display:inline-block puts the text where it is specified with vertical-align.
<div id='container'>
<div id='text'>This is a test</div>
</div>
#container{
height: 200px;border: 5px solid blue;text-align:center;
}
#text,#container:before{
vertical-align: middle;
display: inline-block;
}
#container:before{
content: "";
height: 100%;
}
This is weird. I have a "wrapper" with three columns like this:
http://d.imagehost.org/view/0543/cssproblem
The first column has a picture, the second column has text and the third column has three links. It works fine if the third block has just text and not links (see the top of the linked picture) but when I make links out of the text, the text is no longer side by side (see the bottom of the linked picture).
I just can't understand what's wrong with the code. How can the text in the third column to stay side by side even when they are links?
css:
.wrapper{
margin-left: 45px;
margin-bottom: 4px;
width: 466px;
height: 22px;
}
.first{
width: 22px;
float: left;
}
.second{
width: 266px;
float: left;
}
.third{
width: 178px;
float: right;
}
p.text1 {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1.2em;
text-align: left;
margin-left: 12px;
margin-top: 3px;
}
p.text2 {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-align: right;
}
a.opt {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-decoration: none;
}
a.opt:visited {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-decoration: none;
}
a.opt:active {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-decoration: none;
}
a.opt:hover {
font-family: lucida sans unicode, sans-serif;
color: #ffffff;
font-size: 1em;
text-decoration: underline;
}
html:
<div class="wrapper">
<div class="first><img src="image.gif" /> </div>
<div class="second"><p class="text1">Some text here</p></div>
<div class="third"><p class="text2"><a class="opt" href="http://">LINK 1</a> | <a class="opt" href="http://">LINK 2</a> | <a class="opt" href="http://">LINK 3</a></p></div>
</div>
My guess is that it's the float: right declaration in your .third class. Try starting by adapting your CSS to look like this:
.wrapper{
margin-left: 45px;
margin-bottom: 4px;
overflow: hidden;
width: 466px;
height: 22px;
}
.first{
width: 22px;
float: left;
}
.second{
width: 266px;
float: left;
}
.third{
width: auto;
overflow: hidden;
}
That eliminates the need for the right-floating div. That should hopefully clean things up enough. If not, I'll modify my answer.
Is there a way to DRY this CSS up? Only difference is color?
div.base-text-gold {
position: absolute; bottom: 9px; color: #FED577; font-size: 10px;
font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
div.base-text-grey {
position: absolute; bottom: 9px; color: #D1D2D4; font-size: 10px;
font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
Separate out the colours into different CSS classes like so:
div.base-text {
position: absolute; bottom: 9px; font-size: 10px;
font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
div.gold {
color: #FED577;
}
div.grey {
color: #D1D2D4;
}
and then simply apply two classes to the elements instead:
<div class="base-text gold">...</div>
You could try one of the lessCSS or dotlesscss
librarys available
You could create a "base class" base-text, and then just keep the colors in the "sub-classes":
div.base-text {
position: absolute; bottom: 9px; font-size: 10px;
font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
div.base-text-gold {
color: #FED577;
}
div.base-text-grey {
color: #D1D2D4;
}
Of course, the disadvantage is that you will have to add 2 classes to your div's instead of a single one:
<div class="base-text base-text-gold">...</div>
My initial reaction is to tell you that it's probably not a good idea to specify colors in your CSS class names. At that point, it's really no better than inline CSS. You're better to go with .emphasized or .strong for the gold text, depending on your situation. And even then, you can just style and use <em> or <strong> tag. That said, how about I answer your question?
The answer is in attempting to never use the same declaration twice.
div.base-text-gold, div.base-text-grey {
position: absolute; bottom: 9px; font-size: 10px;
font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
div.base-text-gold { color: #FED577; }
div.base-text-grey { color: #D1D2D4; }
You could inherit from a class "base-text" which doesn't define color.
Then you have two choices:
have a style="" next to it...
<style>
div.base-text {
position: absolute; bottom: 9px; font-size: 10px;
font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
</style>
<html><head>[the style thingie above]</head><body>
<div class="base-text" style="color:BLARGH"> RAWR~ </div>
</body></html>
OR
inherit from classes gold and grey too
<style>
div.base-text {
position: absolute; bottom: 9px; font-size: 10px;
font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
div.grey {
color: #999999;
}
div.gold {
color: #DDDD99;
}
</style>
<html><head>[the style thingie above]</head><body>
<div class="base-text gold" style="color:BLARGH"> RAWR~ </div>
<div class="base-text grey" style="color:BLARGH"> DADADEEEEE~ </div>
</body></html>
Well... one thing you could do is:
div.base-text {
position: absolute; bottom: 9px; font-size: 10px;
font-weight: bolder; text-align: center; width: 61px; text-transform: uppercase;
}
div.base-text-gold {
color: #FED577;
}
div.base-text-grey {
color: #D1D2D4;
}
And in each of your divs, just go:
<div class="base-text base-text-gold">This is the gold div.</div>
<div class="base-text base-text-grey">This is the grey div.</div>