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
Related
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 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 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;
}
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/
I get a little lost on css stylesheet syntax. My dilemma is that I have four <div> tags with ROUGHLY the same style, except the colors are different or one may float: left but another tag might not have that.
So I was thinking I could add id to all of these so that I can move these style statements into the stylesheet.
How would I address each individual id in the stylesheet? I'm thinking something like div#id or something. Lets assume basic div is already unavailable, but I want some abstract stylesheet tag that at least contains display:block and font-size:11px and then a more specific stylesheet tag to address each <div> tag by its id or class or name.
<div style="display:block; color:steelblue; float:left; font-size:11px;">Open Requests </div>
<div id="openNumber" style="display:block; color:steelblue; font-size:11px; clear:right;">13</div>
<div style="display:block; color:green; float:left; font-size:11px;">Completed Requests </div>
<div id="completeNumber" style="display:block; color:green; float:left; font-size:11px;">13</div>
I get a little turned around on the syntax for different selector types
Thanks for any insight
You could try the following:
css:
.floatLeft { float: left; }
.clearRight { clear: right; }
.open { color: steelblue; font-size: 11px; }
.complete { color: green; font-size: 11px; }
html:
<div id="openRequests" class="open floatLeft">Open Requests </div>
<div id="openNumber" class="open clearRight">13</div>
<div id="completeRequests" class="complete floatLeft">Completed Requests </div>
<div id="completeNumber" class="complete floatLeft">13</div>
A <div> is already a block-level element, so you don't need to specify display: block on it.
You can create a class .numbers(or whatever best describes your grouping of divs) to hold the shared styles, and add that class to the divs in question. Then, target individual divs with their id's for tweaking colors.
Something like this might help:
CSS
.numbers {
/* shared styles */
}
#one {
/* unique styles */
}
#two {
/* unique styles */
}
#three {
/* unique styles */
}
Organizing your styles, in a semantic and meaningful way, can be challenging, but the time you save maintaining your code is well worth it. For a much better summary of how to do this, you can read this article.
I would use multiple classes to group silimar styles together. Try to extract semantic meaning:
Something like this:
CSS:
.block11 { display:block; font-size:11px; }
.left { float:left; }
.clear-right { clear:right; }
.steelblue { color: steelblue; }
.green { color: green; }
HTML:
<div class="block11 steelblue left">Open Requests </div>
<div class="block11 steelblue clear-right" id="openNumber">13</div>
<div class="block11 green left">Completed Requests </div>
<div class="block11 green left" id="completeNumber">13</div>
since the id's have to be unique, you could add an ID to those and then use:
#openRegistration{display:block; color:steelblue; float:left; font-size:11px;}
#openNumber{display:block; color:steelblue; font-size:11px; clear:right;}
#completedRequests{display:block; color:green; float:left; font-size:11px;}
#completeNumber{display:block; color:green; float:left; font-size:11px;}
NOW, given the above, we can simplify it as:
#openRegistration,#openNumber,#completedRequests,#completeNumber{display:block;font-size:11px;}
#openRegistration{ color:steelblue; float:left; }
#openNumber{color:steelblue; clear:right;}
#completedRequests{ color:green; float:left;}
#completeNumber{ color:green; float:left; }
or IF you want, give them a class and use that:
.myClass{display:block;font-size:11px;}
#openRegistration{ color:steelblue; float:left; }
#openNumber{color:steelblue; clear:right;}
#completedRequests{ color:green; float:left;}
#completeNumber{ color:green; float:left; }
EDIT:
or IF you want, give them more than one class and use that:
.myClass{display:block;font-size:11px;}
.complete{ color:green;}
.open{ color:steelblue;}
#openRegistration{ float:left;}
#openNumber{clear:right;}
#completedRequests{ float:left;}
#completeNumber{ float:left; }
<div class="myClass complete" ...
You can define some CSS classes and assign them to your elements according to what you need. Just an example:
CSS:
.myDiv {
display: block;
font-size: 11px;
}
.left { float: left; }
.clear-both { clear: both; }
.steelblue { color: steelblue; }
.green { color: green; }
HTML:
<div class="myDiv left steelblue">Open Requests </div>
<div class="clear-both"></div>
<div id="openNumber" class="myDiv steelblue">13</div>
<div class="myDiv green left">Completed Requests </div>
<div id="completeNumber" class="myDiv green left">13</div>
In this way you can separate your classes and use them only when you really need it.
You can use a class for the similarities, and an id for the differences.
<div class="common" id="some-id"><!-- ... --></div>
CSS:
.common {
display: block;
float: left;
font-size: 11px;
}
#completeNumber {
color: green
}