Trying to learn CSS, I was writing code and wanted to name three CSS classes. I searched CSS name convention and stumbled upon this answer. So I named my classes as suggested in the answer, but one of my installed atom packages is advising me against it. I am now confused if I am doing it right or not. for <div class="container top">I have:
.container.top {
background-color: #e4f9ff;
width: 200px;
height: 200px;
}
.container.top {} targets a div with both classes (container & top)
If you put a space inbetween them .container .top {} then it targets the child with a class of (top) inside the partent (container).
Everything looks correct on my end. Unless it's not accomplishing what you want it to accomplish.
.container.top {
background-color: #e4f9ff;
width: 200px;
height: 200px;
}
<div class="container top">
In the case of:
CSS: .container.top { color:red; }(no space)
HTML: <div class="container top">First text layer</div>
"ONLY in this case where a div has .container and .top as classes then apply css"
An example of this would be the "Night mode" on most website... Devs apply a .night class to the body tag via JS.
On the CSS side you would have a regular body tag related color like so body{ background-white; } and a night mode only color body.night{ background-color:black; }.
As soon as the .night class is added to the body, the background color will change because it has priority as it's more "targeted".
/------/
In the case of: CSS: .container, .top { color:red; }
HTML: <div class="container top">First text layer</div>
"If there is a .container class apply css. if there is a .top class apply css"
Related
I'm using a CMS with predefined classes (cbFormFieldCell).
So I can't change some class elements because they are used at some other parts of the website. If I change the format for every element of that class the website is broken.
I want to change the style of the class "cbFormFieldCell" only inside a <table class="tabelle">. Outside the table the other elements may not be changed.
.cbFormFieldCell { min-width: 300px; max-width: 300px; overflow: hidden;}
That works for every class of the website. But some objects are broken.
Is it possible to do something like that:
Change only predefined class="cbFormFieldCell" elements in table class="tabelle"?
e.g.
.tabelle.cbFormFieldCell
{ min-width: 300px; max-width: 300px; overflow: hidden; }
Can anyone help?
The 'space' between your CSS classes are used to target different elements. Below you will find an example what happens when you combine classes without or with spaces.
Hopefully this help you to understand how to target your element.
.parent-1 .child {
color: green;
}
.parent-2.child {
color: red;
}
/* addition styling */
p {
padding: 20px;
background-color: #eff0f1;
border-radius: 10px;
}
<!-- Without container -->
<p class="child">No CSS rules are applied here.</p>
<!-- With containers -->
<div class="parent-1">
<p class="child">This will be targeted: green</p>
</div>
<div class="parent-2">
<p class="child">No CSS rules are applied here.</p>
</div>
<div class="parent-2 child">
<p class="child">This will be targeted: red</p>
</div>
You can use css !important like this
.cbFormFieldCell { min-width: 300px !important; max-width: 300px !important; overflow: hidden !important;}
"!important" makes css attribute to be first-level
You are concatenating the classes by writing them with no space, which basically means
.tabelle.cbFormFieldCell will apply to an element that has BOTH those classes.
In order to target .cbFormFieldCell inside of .tabelle add a space between them like this .tabelle .cbFormFieldCell.
Or if it's a direct child of .tabelle, you can use the descendant selector like this .tabelle > .cbFormFieldCell
Thank you everyone!
I actually had to remove the space, use important and additionally use another default class.
.cbFormTableEvenRow .cbFormFieldCell
{ min-width: 100px !important; max-width: 100px !important; width: 100px !important; overflow: hidden !important; }
I am designing a Google-AMP based webpage. There are some limitations of Google-AMP that css !important property can't be used.
In Google-AMP, a built-in style is using !important property as follows:
amp-sidebar {
max-width: 80vw!important;
}
In my scenario I need to update a style max-width to 100vw. How can I update the amp-sidebar to 100vw without using !important?
PS: JavaScript or Inline-CSS can't be used. I need to make changes using only CSS.
Here is the fiddle..
https://jsfiddle.net/mutafaf/cdb3dnqz/
The most precise selector will take the lead.
<div id="foo">
<div id="bar">
Hi
</div>
</div>
#bar {
background-color: green;
}
#foo #bar {
background-color: blue;
}
Here, you will have a blue background!
So maybe you can build a rule with #parent amp-sidebar
I used padding on both sides left and right. So the div took full screen.
amp-sidebar {
padding-left: 10vw;
padding-right: 10vw;
}
So width allowed was 80vw + padding(left & right) 20vw = 100vw.
That solved my problem.
Hope this helps you as well.
I'm trying to make a simple web page design with multiple divs. Each div should apply 1 or more external stylesheet from a list.
My problem is that, from the examples I've read so far, I'm not sure how to do this elegantly. It seems that external stylesheets are applied to the whole html file. So should I be looking at modularizing my divs into separate files? Or would something like iFrame be a neater solution?
Current Solution:
External CSS:
div.test1 {
color: purple;
background-color: #d8da3d
}
.test2 {
color: red;
background-color: #d8da3d
}
#test3{
color: green;
background-color: #d8da3d
}
HTML body code:
<div class="test1">
<p> Style1
</div>
<div class="test2">
<p> Style2
</div>
<div id="test3">
<p> Style3
</div>
My references:
Div with external stylesheet?
http://www.htmlhelp.com/reference/css/style-html.html
- 1
Take a look at this:
https://stackoverflow.com/a/17668004/1552518
- 2
Or just add a class to each div:
<div id="container">
<div class='div1'>
style1
</div>
<div class='div2'>
Style2
</div>
</div>
And in your external css:
.div1 {
// Style applied only to the first div
}
.div2 {
// Style applied only to the second div
}
- 3
Or if you can't add a class to the divs use this in css:
#container > div:first-child {
// Style applied only to the first div
}
#container > div:last-child {
// Style applied only to the second div
}
Are you just trying to style the div's differently? Have you looked into using a class for each of the divs?
From the second link you provided: http://www.htmlhelp.com/reference/css/style-html.html#class
When you use the css styling:
body{
color:purple;
background-color: #d8da3d
}
You are saying that you want to style the entire body of the document with the styling you have set.
In order to target specific elements you should give those elements an id or class.
For example:
<div id="test1"></div>
<div class="testing"></div>
<div class="testing"></div>
Please note that when using and id you must make sure to give the element a unique id. However many elements can share the same class. Therefore for the above example the styling:
#test1{
color:blue;
background-color:black;
}
.testing{
color:red;
background-color:white;
}
Will apply the first style (test1) to the div with the same id, and the second style (testing) to the two divs with the same class.
I have a really simple example which I've written on JSBin. It looks like this:
All I'd like to do is simply take two divs of a given width and height and display them side-by-side without a gap between them. I've used display: inline-block to accomplish the above, but it seems like it refuses to chomp the whitespace between divs, which seems to completely violate the idea of the separation of content and styling.
Here's my HTML:
<div class="container">
<div class="a">
<!-- completely empty -->
</div>
<div class="b">
<!-- nothing at all -->
</div>
</div>
and here's my CSS:
.container {
display: inline-block;
}
.a {
width: 320px;
height: 240px;
display: inline-block;
background-color: #83C5D1;
}
.b {
width: 180px;
height: 240px;
display: inline-block;
background-color: #B2D9D6;
}
How can I work around this to get them snug together without touching my HTML?
Add float:left to both of the divs classes .a and .b
I upated your JSBin http://jsbin.com/iwihox/4/edit
You're using a tabular design. Go for broke!
.container {
display: table-row;
}
.container > * {
display: table-cell;
}
Edit: Firefox did not like the inline-block children.
QUICK FIX
All given answers are good solutions, however the main reason for the gap is that there is white-space characters in your actual HTML that gets rendered. If you remove the space between both divs:
..</div><div>..
That will fix your current problem.
Heres the JSBIN: http://jsbin.com/iwihox/10/edit
THE PROPER SOLUTION:
The proper way to do this, is add float:left to both classes .a and .b. Making them float does change the box-model, so depending on your surrounding markup, you will need to add clear:both to the next tag in your HTML to have the document properly flowing.
CHECK THIS FIDDLE: http://jsbin.com/iwihox/19/edit
Let me know, Thanks!
I'm been learning for web design as well as development for quite some time now but I'm still stumped by some basic rules of CSS.
I'm trying to figure out how the behavior of :hover works when hovering one element, to affect another. But I came across something unexpected...
Q: Why does element .one turn black when .two is hovered?
Here's the code and the fiddle.
HTML:
<div class="one">
<div class="two"></div>
</div>
CSS:
div {
width: 100px;
height: 100px;
position: absolute;
top:0;
}
.one {
left:0;
background: red;
border: 5px solid black;
}
.two {
left:200px;
background: yellow;
}
.one:hover {
background: black;
}
here is my jsFiddle
Help anyone?
The element .two is found inside the .one element. so hovering .two means that you are also hovering .one. The event "bubbles" up to the parent element.. even if it doesn't look like that visually. To hover each one independently you will have to take .two out of .one. You might want to wrap both in a container to properly set their positioning. working jsFiddle
<div class="someContainer">
<div class="one"></div>
<div class="two"></div>
</div>
You have to change your html structure to achieve this.
As right now div having class two is inside the div class one so two is becoming child of class one div so when you hover on div which have class two it automatics consider that you are hovring on class one div as well.
Use absolute div and don't make it child of class one div.