I am playing around with a site that has an image of a 600px by 600px grid of 9 squares in its own div. I wanted to be able to highlight each grid square on hover and I have succeeded, but I would like to know if my code could be more compact.
for instance my highlight behavior never changes, but the way I am coding it I would need to code 9 of them for each square, how can I just have one and apply it to all the grid squares?
here is the code.
#theGrid
{
margin-left: auto;
margin-right: auto;
width: 600px;
height:600px;
background-image:url("img/grid.png");
}
#square1
{
top:7px;
left:7px;
width:200px;
height:200px;
background-color:transparent;
}
#square1:hover
{
background-color: yellow;
opacity:0.2;
filter: alpha(opacity=20);
}
Thanks all.
It doesn't matter weather you use class or id or not on your solution but there is a proper way in the long run. What matters is that you can use the same style name on each square. So, it would be square and not square1, 2, 3, ect... We use class for an object that is repeated on the same page multiple time and id for an object that happens one time.
Is is a quick reference I found: http://www.htmldog.com/guides/css/intermediate/classid/
here is the code that I would start using.
You will need to use float and then use a clear:both when you are on a new row.
<div id="outterWrapper">
<div id="theGrid">
<div class="square"></div><div class="square"></div><div class="square"></div>
<div class="clear"></div>
<div class="square"></div><div class="square"></div><div class="square"></div>
<div class="clear"></div>
<div class="square"></div><div class="square"></div><div class="square"></div>
</div><!-- END THE GRID -->
</div><!-- END OUTTER WRAPPER -->
#theGrid{
margin-left: auto;
margin-right: auto;
width: 600px;
height:600px;
background-image:url("img/grid.png");
}
/*Here we use class to reference all the squares*/
.square {
margin: 7px 0 0 7px; /* play with your positioning here. Can also use padding*/
width:200px;
height:200px;
background-color:transparent;
float:left; /*This will make all the boxes move next to each other*/
}
.square:hover {
background-color: yellow;
opacity:0.2;
filter: alpha(opacity=20);
}
.clear {
clear:both;
}
Instead of using # for both #square1 & #square1:hover, you could use .square1 & .square1:hover.
The # character is used for IDs ( ie. <span id="square1"></span> )
The . character is used for classes ( ie. <span class="square1"></span> )
Then apply the class ".square" to each of the nine squares. Any square with the .square class will have that style applied to it. Same goes for the hover.
Otherwise, if that doesn't work for you... you could do it in javascript by added a onmouseover and onmouseout events to each square. Then have javascript functions that handle applying the styles dynamically from code.
For example:
<div id="square1" onmouseover="handleMouseOver('square1')" onmouseout="handleMouseOut('square1')"></div>
<script>
function handleMouseOver(sq)
{
// set style
}
function handleMouseOut(sq)
{
// set style
}
</script>
You could use class instead of id
Oh, sorry I misunderstood what you want, you can just do like this
#square1:hover, #square2:hover, #square3:hover.......
{
background: yellow;
}
Related
I'm looking for a way to select an element with two times the same class on a webpage I don't own, so I have no ability to modify its markup.
I would expect that
.abc.abc{background:blue}
only impacts div with class abc abc but in fact is also impacts div with single abc class.
div[class*=abc abc]{background:blue} has the same issue.
.abc{
width:100px;
height:100px;
background:green;
margin:5px;
}
.abc.abc{
background:blue;
}
<div class='abc'></div>
<div class='abc'></div>
<div class='abc abc'></div>
Is there a selector so I can apply rule to div with class abc abc without affecting div with single class abc ?
You just need a more specific target :)
.abc{
width: 100px;
height: 100px;
background: green;
margin: 5px;
}
div[class*="abc abc"] {
background: blue;
}
<div class='abc'></div>
<div class='abc'></div>
<div class='abc abc'></div>
View CodePen Solution
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/
I have three class : product1, product2, product3. I can add css to all these class as follows:
.product1, .product2, .product3{
// add css here
}
But I am looking for more cleaner code to track 1 to 3 followed by 'product' and add css to these. My expectation can be Pseudocode Examples:
.product1to3{
// fun with css.
}
Is there any approach in css?
There is no such kind of css pseudo on what you wanted to achieve.
You can try to use SASS to achieve what you wanted.
and then use the #for Directive
SASS
#for $i from 1 through 3 {
.product#{$i} { width: 20px; }
}
CSS
.product1 {
width: 20px;
}
.product2 {
width: 20px;
}
.product3 {
width: 20px;
}
Also you can try to use LESS
Hope this helps
pure css implementation JSfiddle
So basically you need an "Attribute Begins With Selector" i.e select all classes which start with "product" and then you can use nth child attribute to select range
div[class^="product"]:nth-child(n+4):nth-child(-n+5) {
background: red;
}
Really good article on complex css and nth:child
/* This selects all the elements which have the class name starting with
"product"
*/
[class ^= "product"] {
//CSS
}
If you have an unknown / high number of ".product(x)", and for whatever reason don't want to use an extra class to target them, you can get away with an attribute selector that matches all elements that have a class containing "product".
[class*="product"]
div{
border:2px solid tan;
height:40px;
}
[class*="product"]{
background:steelblue;
}
<div class="product1"> product 1 </div>
<div class="product2"> product 2 </div>
<div class="not"> not a product</div>
<div class="product3"> product 3 </div>
<div class="product4"> product 4 </div>
It occupies just 1 line of compiled CSS, so it's minimal footprint, but be careful how you apply it.
Not an answer for the OP but for others that may find their way here remember that you can use multiple classes for each element.
html
<div class="product product1"></div>
<div class="product product2"></div>
<div class="product product3"></div>
css
/* shared styling */
.product {
display: flex;
background-color: gray;
border: 1px solid red;
}
/* individual styling */
.product1 {
color: black;
}
.product2 {
color: white;
}
.product3 {
color: blue;
}
I am trying to create a div, that is created by adding multiple classes.
For a particulair reason, the width, height and size will not set. Instead they are the auto-size. When I add everything to one class, the size and such work, but as stated earlier when seperated, they will not do anything.
How I created the multiclass div (tried shuffeling the classes aswell)
<div class="box pos1 1x1">
<p class="verdana"> ... </p>
</div>
Inside the CSS file:
.pos1{
display: inline; float:left;
}
.1x1 {
width:13.5vw;
height:13.5vw;
}
.1x2 {
width:13.5vw;
height:17.5vw;
}
.2x2 {
width:17.5vw;
height:17.5vw;
}
div.box{
background-color:#000000; color: white;
margin-left:0.25vw; margin-top:0px; margin-right:0.25vw; margin-bottom:0px;
border: white solid 2px;
}
Also creating one big class is not an option.
Thank you.
Class names starting with numbers are not valid! Your class name have to start with _, - or a letter (a-z)!
The pattern to validate a class name: -?[_a-zA-Z]+[_a-zA-Z0-9-]*
https://www.w3.org/TR/CSS21/grammar.html#scanner
See the following solution:
.pos1{
display:inline;
float:left;
}
.size1x1 {
width:13.5vw;
height:13.5vw;
}
.size1x2 {
width:13.5vw;
height:17.5vw;
}
.size2x2 {
width:17.5vw;
height:17.5vw;
}
div.box{
background-color:#000;
color:#fff;
margin:0 0.25vw;
border:2px solid #fff;
}
<div class="box pos1 size1x1">
<p class="verdana"> ... </p>
</div>
As other mentioned class name cannot start with numbers, and in pos1 you make the div to display as inline. Inline element does not have height, should use inline-block.
I'm trying to make a checkerboard pattern using nth-child, but it isn't working the way I expected it to.
In the example below, I want to set every other p at opposite sides of the div to create a checkerboard pattern. The p are set to width:50%;, and the div is set at width:100%.
I've set up a jsfiddle to demonstrate:
HTML
<div id='check'>
<p>Odd</p>
</div>
<div id='check'>
<p>Even</p>
</div>
CSS
#check {
float:left;
width: 100%;
}
#check p {
width: 50%;
background: #DDD;
}
#check p:nth-child(odd) {
float:right;
}
Can someone make me see how to make this work?
You need to keep all the p elements together in a single div, as the nth-child is based off the parent container. Here is a modified fiddle.. It uses this code:
HTML
<div id ='check'>
<p>Odd</p>
<p>Even</p>
<p>Odd</p>
<p>Even</p>
</div>
CSS
#check {
float:left;
width: 100%;
}
#check p {
width: 50%;
background: #DDD;
clear:both;
}
#check p:nth-child(odd) {
float:right;
}
#check p:nth-child(even) {
float:left
}
Can't have 2 elements using the same id. I believe you want to switch to using classes.
Created a fiddle to demonstrate http://jsfiddle.net/wE6e4/
#checkerboard {
width: 500px;
}
.check {
float:left;
width: 100px;
height: 100px;
}
.check:nth-child(odd) {
background: #DDD;
}
.check:nth-child(even) {
background: #fff;
}
First, you're using an ID multiple times - ID's should be unique. Besides that, the line
#check p:nth-child(odd) means that you want to set the given rules for every odd p child of #check, which is not what you want. You want to make every odd .check (I took the liberty to change the ID's to a class). So you should put them in a container and say:
#cont .check:nth-child(odd) {
float:right;
}
Here's the fiddle:
http://jsfiddle.net/Wbnks/
If you're trying to minimize your CSS, you can try something like this:
HTML:
<div class="checkerboard">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</div>
CSS:
.checkerboard p {
float: left;
width: 50%;
}
.checkerboard p:nth-child(4n-2), .checkerboard p:nth-child(4n-1) {
background-color: #999;
}
http://jsfiddle.net/L9ng7/5/