I need a quick help:
I have a CSS like this:
#ranking li span.awa
{
//Something
}
And HTML like this:
<span class=\"awa\">
<div >
<a href=''>
<img src=''>
</a>
</div>
</span>
Now i don't know what is the name of img and can not put class type to img tag.
I need to set in CSS that img inside span of class awa should have border: 0px; How to do this?
In para langauge i need this:
#ranking li span.awa.img
{
border: 0px;
}
But it does not work. How to write this properly?
Use a space, just like you've used twice. A space means "somewhere inside":
#ranking li span.awa img
{
border-style: none;
}
span.awa.img, my the way, means a span with two classes: <span class="awa img">.
#ranking li span.awa img
{
border: 0px;
}
Also note your markup is invalid, <div> cannot be a child of <span> since it is a block level element.
Related
First, please check my code.
<div className={styles.settingInfo}>
<header>
<h1>User ID</h1>
<p>this is for user ID</p>
<h1>Username</h1>
<p>this is for username</p>
</header>
<div>
<button type='button'>change</button>
</div>
</div>
With this code, what I'm trying to do is giving (h1)username(/h1) tag a margin-top:10px without giving className.
.settingInfo {
#include flexFullWidth;
height: 40%;
header {
#include headerStyle;
h1 {
color: colors.$BIG_TITLE;
letter-spacing: 1px;
}
}
div {
width: 35%;
padding-top: 20px;
border: 1px solid red;
}
}
I set the SCSS file like this, and was finding out how can I give a specific h1 tag a style without using className.
I know we can easily solve the problem giving just a className, but just want to figure out how can work on this differently. Thank you!
My suggestion is to just add a class but if you want to do this without it then you can use nth-child selector like so:
header h1:nth-child(3) {
margin-top: 10px;
}
You can select the first h1 using nth-child(1) in the same manner.
I'm trying to apply a hover for a whole block (the same block must point to a link), but can't make this happen.
http://codepen.io/anon/pen/GogjQK
I've tried to wrap an <a> tag around the entire frame class and edit the hover states individually, but nothing happens.
This is how I'm trying to make it appear on hover, as well when the the link is clicked and active
Hope someone can help me out with this one. Thank you in advance.
You can use child selectors on your frame div to affect the children within.
For example, I added the following code to color the h3 tag when the main frame is hovers.
.frame:hover > div > h3 {
color: #00bb00;
}
If you modify your HTML slightly to be
<div class="frame">
<img src="http://imagizer.imageshack.us/v2/xq90/903/WUtWQJ.png" class="thumbnail" />
<img src="http://placehold.it/60x60" class="thumbnail" id="hidden" />
<div class="info">
<h3>H3</h3>
<p>pppppp</p>
</div>
</div>
You can use the following CSS to change the image as well:
.frame:hover > .thumbnail {
display:none;
}
.frame:hover > #hidden {
display:inline;
}
#hidden {
display:none;
}
Here's an example codepen.
Try adding a hyper reference after the creation of the div that contains your block, like this:
<div class="frame"> <a href="http://stackoverflow.com">
<img src="http://imagizer.imageshack.us/v2/xq90/903/WUtWQJ.png"
class="thumbnail" />
<div class="info">
<h3>H3</h3>
<p>pppppp</p>
</div>
</a>
</div>
Then in CSS, refer to the entire block as a link, like this:
.frame a {
float: left;
width: 300px;
min-height: 60px;
background-color: ##00F;
margin: 0px 10px;
border: 1px solid black
}
.frame a:hover > .info > h3 {
color: green;
}
Example: codepen
I'm trying to sibling-select images. There's a sequence of images that are wrapped with links and I want to select all but the first one.
img {
max-width: 50px;
}
.content img {
max-width: 400px;
}
img.a ~ img.a {
border: 1px #333 solid;
}
<div class="content">
<a href="/">
<img class="a b c" src="https://upload.wikimedia.org/wikipedia/commons/6/6d/Astrodon1DB.jpg">
</a>
<a href="/">
<img class="a b c" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Nipponosaurus_dinosaur.png">
</a>
<a href="/">
<img class="a b c" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/Macronaria_scrubbed_enh.jpg/800px-Macronaria_scrubbed_enh.jpg">
</a>
</div>
Here's a fiddle: http://fiddle.jshell.net/efsev59z/
Why doesn't img.a ~ img.a select all images with class "a" that follows an image with class "a"? From my understanding they're both children of a common element, .content. What's wrong, and how do I make it happen?
To be considered siblings, the elements need to be children of the same immediate parent (not just a common ancestor, since all DOM elements share body as an ancestor for example). Consider something like this:
a ~ a > img.a {
/* styles */
}
sibling selectors only apply to siblings. Each one of those images have their own parents. They are cousins, rather than siblings.
A different approach is to apply the border to all images but then override it for the first image. You can use the :first-child selector to get the first anchor and target the image within it.
img {
max-width: 50px;
}
.content img {
max-width: 400px;
}
img.a {
border: 1px #333 solid;
}
.content a:first-child img {
border:none;
}
http://fiddle.jshell.net/efsev59z/4/
Consider the following:
<a>a</a><a>b</a>
How can I align the second anchor (b) to the right?
PS: float is an abuse in this situation. It's not made for this and it causes some problems, so I need other more reasonable solution.
Just do this:
style="float:right"
Like:
<div>
Equipment
Model
</div>
http://jsfiddle.net/umerqureshi/0jx7kf1L/
You'd need separate containers.
<p>
<span>
<a>Left</a>
</span>
<span class="align-right">
<a>Right</a>
</span>
</p>
p {font-size:0; /* Fixes inline block spacing */ }
span { width:50%; display:inline-block; }
span.align-right { text-align:right; }
span a { font-size:16px; }
JSFiddle example.
Try this CSS,
Using CSS3 nth-child()
a:nth-child(2) {
display: inline-block;
text-align: right;
width: 100%;
}
Demo: http://jsbin.com/opexim/3/edit
Note: nth-child is a CSS3 and won't work on older browsers like IE6, 7 and 8
Support for old browsers
Set class to second <a> anchor element and apply the CSS.
<a>a</a><a class="right">b</a>
a.right {
display: inline-block;
text-align: right;
width: 100%;
}
Maybe you can make something like this: <a>a</a><a class="right">b</a>
And CSS like this:
a.right {
position: absolute;
right: 0;
}
Try and use :nth-child():
a:nth-child(2) {
display: inline-block;
text-align: right;
width: 100%;
}
I don’t know if this works for the older browsers.
Assign a class or id to the 'b' containing anchor and give margin-left:100% to it.
For example:
.second{margin-left:100%;}
or else
a:nth-child(2){margin-left:100%;}
or else
you can also do like mentioned below:
css
a:nth-child(1){display:inline-block;width:50%;text-align:left;float:left;}
a:nth-child(2), .second{display:inline-block;width:50%;text-align:right;}
Working Fiddle
You may try the below code:
<a>a</a><a align="right">b</a>
<a>a</a><a style="text-align:right">b</a>
<div class="mydiv">
<a class ="mylink"> test </a>
</div>
.mydiv {
text-align: left;
}
You must enter your styles for the 'a' tag algin give to 'div'.
One thing I often want to do when laying out a website is to have some elements next to each other, with separators between them. For instance, if I have three elements, I'd want two separators between them, and nothing at either end.
I achieve this in various ways. For vertical stacking of elements, I sometimes use <hr />. Horizontally, I might do something like:
<div>
<span class="notend">things</span>
<span class="notend">stuff</span>
<span>items</span>
</div>
.notend {
border-right: solid black 1px;
}
Is there a more semantic way of doing this? I want to have separators between elements without putting styling elements into the HTML part, or using non-semantic classes. I don't mind of this requires hacky CSS, I just want to get stuff to do with styling away from the HTML files.
Use this:
#menu span + span {
border-left: solid black 1px;
}
http://jsfiddle.net/thirtydot/QxZ6D/
That will apply border-left to all except the first span.
The adjacent sibling selector (+) is supported in all modern browsers except IE6.
Another way to do it is this, which is sometimes nicer because you can keep all the declarations for the "menu buttons" in one block:
http://jsfiddle.net/thirtydot/QxZ6D/1/
#menu span {
border-left: solid black 1px;
/*
a: bunch;
of: stuff;
*/
}
#menu span:first-child {
border-left: 0
}
This has exactly the same level of browser support as the first solution.
Note that if you like this solution, it's better to use :first-child rather than :last-child, because :first-child (from CSS2) is supported in IE7/8 and :last-child (only introduced in CSS3!) isn't.
you can do like this also:
span {position:relative; margin-left:5px}
span:after {
content:"|";
position:absolute;
left:-5px;
}
span:first-child:after {
content:"";
}
In this method you can also use others separators like / , \ , .
http://jsfiddle.net/sandeep/UNnxE/
how about something like this in your example:
<div>
<span>things</span>
<span>stuff</span>
<span>items</span>
</div>
div span{
border-left: solid black 1px;
}
div span:last-child{
border:none;
}
no need for additional classes.
Well for a start, you can simplify it to this:
<div>
<span>things</span>
<span>stuff</span>
<span class="end">items</span>
</div>
span {
border-right: solid black 1px;
}
span.end {
border-right: none;
}
If you're willing to drop some support in older browsers, you can reduce that to this, using the :last-child pseudo-class:
<div>
<span>things</span>
<span>stuff</span>
<span>items</span>
</div>
span {
border-right: solid black 1px;
}
span:last-child {
border-right: none;
}
I often want to have a series of items with semi-colons between them.
Here's what I do for this:
.semi-list span:not(:last-of-type)::after {
content: "; ";
}
<div class="semi-list">
<span>Item One</span>
<span>Item Two</span>
<span>Item Three</span>
</div>
It's a pretty flexible solution.
Ref:
https://www.w3schools.com/cssref/sel_not.asp
https://www.w3schools.com/csSref/sel_last-of-type.asp
Something like this?
CSS:
#note_list span {
display:inline-block;
padding:0 10px;
}
.notend {
border-right:1px solid #000000;
}
HTML:
<div id="note_list">
<span class="notend">things</span>
<span class="notend">stuff</span>
<span>items</span>
</div>