I'm trying to create a new img class so I can add properties to it without affecting the original img class.
example:
<img class="Test" src="www.google.com"/>
Can anyone advise how I can do this in CSS
You can have multiple classes on an HTML element, seperated by a space. It than gets styles from both.
So in HTML:
<img class="old" src="image.jpg">
<img class="old new" src="image.jpg">
And CSS:
.old { width: 100px; }
.new { height: 50px; }
While the first image only has a width assigned, the second also has a height definition.
The class attribute allows for a space-delimited list of classes that are applied to the element.
For example, the following will result in an image that is 40px wide by 20px high:
HTML
<img class="Test another-class" src="www.google.com"/>
CSS
.Test {
width: 40px;
}
.another-class {
height: 20px;
}
Related
I've currently got a few buttons with the .continue class on a webpage, structured with the following code:
<div class="continue" data-section="1">
Continue
<i class="fas fa-arrow-right" id="continueArrow1"></i>
</div>
Each of the continue buttons have a different "data-section" values, and are also placed against different backgrounds on the webpage. I'm wondering if there is a way I am able to target one of these continue button divs that have a certain data-section value, and change the styling of those who match.
Something like:
.continue:data-section=1{
//css that styles button with data-section1
}
.continue:data-section=2{
//css that styles button with data-section2
}
Obviously I could always just give them different IDs, but that leads to a lot of code duplication for the JS and JQuery animations.
Use the attribute selector:
.continue[data-section="1"] {
...
}
Example:
div {
width: 100px;
height: 100px;
background: blue;
display: inline-block;
margin: 5px;
}
.continue[data-section="2"] {
background: red;
}
/*We can combine this selector with other selectors as we normally would:*/
.continue[data-section="2"]:hover {
background: yellow;
}
<div class="continue" data-section="1"></div>
<div class="continue" data-section="2"></div>
<div class="continue" data-section="3"></div>
<div class="continue" data-section="4"></div>
<div class="continue" data-section="5"></div>
Read more on MDN
I want to select the first and the last child with CSS but it does not work. Please take a look at my Fiddle and help me:
.area {
height: 100px;
width: 100px;
}
.area:first-child {
background-color: red;
}
.area:last-child {
background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
https://jsfiddle.net/rbw8dpsb/1/
I advise you to add a container as in your code they are childs of body BUT you don't know the last-child or the first-child of body as you may have other elements like script tags or other tags dynamically added (like in the snippet here or with jsfiddle or any other online coding tools).
.area {
height: 100px;
width: 100px;
}
.area:first-child {
background-color: red;
}
.area:last-child {
background-color: green;
}
<div>
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
</div>
Here is a screenshot to show what is inside your body when you run the snippet:
As you may clearly notice, there is a div added at the end which is the last-child of the body. Adding a container will avoid you dealing with random settings and hidden elements added.
If you don't want to let all that divs in another structure you should use first-of-type and last-of-type instead of first-child and last-child
.area {
height: 100px;
width: 100px;
}
.area:first-of-type {
background-color: red;
}
.area:last-of-type {
background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
As Temani Afif pointed, this solution is arbitrary and may not work in all the situations. As shown, it is not properly working on the code snippet but it does on JSFiddle for example. I.E. https://jsfiddle.net/vm1scerv/
Struggling to change the size of an image.
<div class="mypage">
<div class="mypage-block">
<div class="mypage-image">
<a href="/mylink">
<img alt="" src="mypic.jpg" style="width: 180px; height: 180px;"></a></div>
This is what I have tried
.page .page-block .page-image img {
width: 140px;
height: 140px;
}
When I inspect in Chrome it shows this img value as "element.style" set at 180px, this is the value I am having problems overriding.
Remove the inline styling...it will normally win as it comes after the CSS sheet as it will therefore have priority.
If absolutely necessary you can force the stylesheet to 'win' by adding !important statements but it's not recommended.
img {
width: 140px;
height: 140px;
}
<img src="http://lorempixel.com/output/city-q-c-180-180-5.jpg" style="width: 180px; height: 180px;" alt="">
<img src="http://lorempixel.com/output/city-q-c-180-180-5.jpg" alt="">
The inline style on the img element is overriding your CSS styling.
In order to undo this (assuming you have no ability to remove the inline style from the img element itself) you need to add an !important deceleration to your CSS attributes.
Your classes in your CSS file also do not match up those declared in your HTML
.mypage .mypage-block .mypage-image img {
width: 140px !important;
height: 140px !important;
}
I have a image gallery with a 2 column layout. The image gallery can contain 1 column full width images between the 2 column images.
See my Codepen Example:
<div class="gallery">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
<img class="large" src="http://nosrc.io/400x200">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
<img class="large" src="http://nosrc.io/400x200">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
<img src="http://nosrc.io/200x200">
</div>
http://codepen.io/anon/pen/JdgBOb
Why does :nth-child select the wrong gallery items after the second full width image? Normally all left column images should have margin-left: 0; and all right column images should have margin-left: 2%;.
P.S. I can not use JavaScript.
To really get this working properly (assuming your image sizes may be dynamic) you'll need to use .large:nth-of-type(...) ~ img and it will get pretty complicated (not to mention it may not work on some older browsers). An easier solution would just be to use 1% margin on all images: http://codepen.io/Godwin/pen/MwNBMK.
check it out. That says:
.gallery img:nth-child(2n+1) {
margin-left: 0;
}
and:
.gallery img.large ~ img:nth-child(2n+1) {
margin-left: 2%;
}
the (2n+1) changes in what position uses the attribute
Wouldn't this suffice? I know but that theres unnecessary right margin in each line of images, but..
http://codepen.io/anon/pen/qdeyzP
I also took the liberty of refactoring that weird float clearing.
.gallery {
width: 400px;
overflow: hidden;
}
Insetad of the bloaty:
.gallery::before,
.gallery::after {
content: " ";
display: table;
}
.gallery::after {
clear: both;
}
`
Since overflow: hidden is a pretty good clearfix on its own.
I don't think nth-child is doing what you think it's doing. It's not the nth-child relative to the .large element; it's relative to all the img children of .gallery. If you use the style inspector and examine the styles being applied to each img, you should be able to see what I mean.
You could try a rule like this:
.gallery img {
float: left;
width: 48%;
margin-right: 2%;
margin-bottom: 2%;
}
.gallery img.large {
width: 98%;
}
See http://codepen.io/anon/pen/NqQLYx.
Firstly, I would like to say that I have tested if my link to my .css works, the background is made into a black color.
This is a ASP.NET Mvc test application which I am making, and I am having difficulty positioning some of my elements which are nested in div boxes. I have come to the conclusion that my div boxes nested within the topmostheader box is ignoring my .css code.
Here is my entire css file, called custom1.css
#topmostheader
{
background: none repeat scroll 0% 0% rgb(0, 0, 0);
height: 90px;
text-align: center;
}
#topmostheader.inner
{
width: 1280px;
margin: 0 auto;
text-align: left;
background-color: Red;
}
#topmostheader.app-name
{
font-size: 14px;
float: left;
line-height: 90px;
color: rgb(119,119,119);
margin: 0px 20px 0px 0px;
}
#topmostheader.xxx-logo
{
margin: 0px;
height: 90px;
float: right;
}
and here is my div box layout.
<div id="topmostheader">
<div class="inner" >
<div class="app-name">
Lunch Application
</div>
<div class="xxx-logo">
<img src="/content/xxx/logo.png" alt="xxx logo"/>
</div>
</div>
</div>
The desired result is not produced: the app-name, inner and acceleration logo divboxes are all dead-center in the screen, where the app-name must be in the left side, and the logo in the right.
I have tested the following code (Which produced the desired result, in an undesired manner - I may reuse this code multiple times which are in the .css file)
<div id="topmostheader">
<div class="inner" >
<div class="app-name" style="float:left">
Lunch Application
</div>
<div class="xxx-logo" style="float:right">
<img src="/content/xxx/logo.png" alt="xxx logo"/>
</div>
</div>
</div>
What am I doing wrong? Why are my div boxes not "floating" when I use the .css file?
To target the correct divs you need a space between the id and class name in your CSS rules: (e.g. change #topmostheader.app-name to #topmostheader .app-name)
You’re missing a space between your ID selectors and your class selectors.
#topmostheader.inner means “select the element with an id of topmostheader and a class of inner”.
You want #topmostheader .inner, which means “select elements with a class of inner that are descendants of the element with an id of topmostheader“
you need to put a space between the id #topmostheader and the class e.g. .acceleration-logo otherwise the browser assumes you are applying style to div with id #topmostheader and class .acceleration-logo not a child of class .acceleration-logo with parent of #topmostheader