I have a problem with the :not() selector on CSS.
I have this code:
<div class="group">
<div role="layer" class="one">Layer</div>
<div role="layer" class="two">Layer</div>
<div role="layer" class="three">Layer</div>
<div role="layer" class="four">Layer</div>
</div>
and this CSS:
div[role="layer"]{
width: 100px;
height: 25px;
border: 1px solid red;
border-radius: 5px;
float: left;
}
.group > [role="layer"]:first-child{
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.group > [role="layer"]:last-child{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.group [role="layer"]:not(:first-child){
border-radius: 0;
}
JSFiddle Example
What I want to do is to make the first and last layer to have rounded corners but not the other layer. As you can see I can make the first layer not to have a border radius, but when the :not(:first-child) selector is applied, it makes the last layer to change.
If someone can understand my point, I'd really appreciate your help.
What you want to do is say "layers that are neither the first child nor the last child should have border-radius: 0". You can achieve this by having multiple :not() selectors:
.group [role="layer"]:not(:first-child):not(:last-child){
border-radius: 0;
}
Updated jsFiddle
I think you need 2 changes here:
Move the last CSS declaration (the one with :not) up above the :last-child declaration (in CSS order matters)
Replace
.group > [role="layer"]:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
with
.group > [role="layer"]:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Related
How to assign after & before pseudo classes to multiple CSS-classes
For example:
[class*="divclass-"]::before, ::after{
border-radius: 50%;
width: 30%;
height : 30%;
border: 3px solid red;
}
Consider this HTML structure, where you have a <div> which have children <span> and <p>. And another <span> and <p> as siblings.
<div>
<span>abc</span>
<p>xyz</p>
</div>
<span>123</span>
<p>456</p>
For example, if we need to change the colour of the children, we could write on your way,
div span, p{
color: red;
}
This problem with this is that, it will change the colour of the sibling <p>456</p> too as the style is applied globally to all the paragraph tags.
And the solution is to follow specificity as we did with the <span> and write the selectors as
div span,
div p{
color: red;
}
The same rule applies to pseudo-elements as well. Hence the solution is,
[class*="divclass-"]::before,
[class*="divclass-"]::after{
border-radius: 50%;
width: 30%;
height : 30%;
border: 3px solid red;
}
Note 1
If you are working on SASS, your syntax could be,
[class*="divclass-"]{
&::before,
&::after{
border-radius: 50%;
width: 30%;
height : 30%;
border: 3px solid red;
}
}
Note 2
The before and after pesudo-elements require the content property.
Hope this helps.
The comma does not mean that the following elements are children of the same selector (here [class*="divclass-"]).
It just allows you to chain the selectors.
#see https://www.thoughtco.com/comma-in-css-selectors-3467052
Here is the solution:
[class*="divclass-"]::before,
[class*="divclass-"]::after {
border-radius: 50%;
width: 30%;
height : 30%;
border: 3px solid red;
content: '';
}
<div class="divclass-1" style="height: 10px; width: 10px"></div>
I have simple css and html code and i wondering why last vertical image not working. I mean it border and margin should be added to last element not first.
Is anyone knows why this not work?
See in https://jsfiddle.net/st2Lwrgj/
* {margin: 0; padding: 0;}
.wrap {width: 250px; border: 1px solid red;overflow:hidden;}
img {
display: block;
width: 100%;
height: auto;
margin-bottom: 10px;
}
img.vertical {
width: 45%;
float: left;
margin-right: 10px;
}
img.vertical:nth-child(even) {
margin-right: 0px;
border: 2px solid blue;
}
:nth-child(even) will apply to every second image (second, fourth and so on). When you insert a horizontal image without the .vertical class you will break this order.
The following is a bit of a workaround, but the logic is pretty simple.
First we select every second image using img.vertical:nth-child(even)
We then find images without the .vertical class using:not(.vertical)
We then use the general sibling selector to select the following images and revert the order using img.vertical:nth-child(odd) instead of even.
As we have now applied borders to both odd and even ocurances of img.vertical, we need to remove the styling from the images we selected at point 1. We do this with a selector as set in point 3, but with even instead of odd: img:not(.vertical) ~ img.vertical:nth-child(even)
TLDR; change this part:
img.vertical:nth-child(even) {
margin-right: 0px;
border: 2px solid blue;
}
Into the following:
img.vertical:nth-child(even),
img:not(.vertical) ~ img.vertical:nth-child(odd) {
margin-right: 0px;
border: 2px solid blue;
}
img:not(.vertical) ~ img.vertical:nth-child(even) {
margin-right: 10px;
border: 0;
}
You can see how this works in this fiddle.
I have used :nth-child for a list element - li:nthchild(2) in a class- "one". There is another list element on the page belonging to another class(class="two)" and the css of the class "one" applies to the list element of the class "two".
Here is the CSS of first list element"
.one li:nth-child(2){
position: absolute;
width: 80% !important;
background-color: orange;
color: #FFF;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
And this is for the class two:
.two li:nth-child(2) {
float: left;
margin: 0 5px 5px 0 !important;
display: block;
list-style: none;
border: none;
background: none;
}
I don't want the class "two" to inherit the css of class one. Could any one tell me how to make the .one li:nthchild(2) css applies only to that class and not affect others?
Thanks!
It seems like ul.two is inside a child li of ul.one.
To correct the issue, modify your CSS like:
.one > li:nth-child(2) {
...
}
That should do it.
I believe it's simple, but since I'm new to this I don't have a clue of how to do it. I just want to change the background color of a li tag - just for fashioning, nothing else.
This is my HTML:
<ul id="abas">
<li>PROGRAM</li>
<li>PROC</li>
<li>DDNAME</li>
</ul>
Sorry for being a noob but, this is the css part right?
#abas li a
{
text-decoration:none;
background-color:3B31FF;
color:#FFFFFF;
float:left;
margin-right:20px;
border-top-left-radius:23px;
border-top-right-radius:0px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
}
I noticed that here>>> "background-color:3B31FF;" is where I change the
color of the background, but doing this, changes all the background colors of course
... I only need 1 "li" tab to change and any html tutorial would be nice too.
Css code:
#abas li {
background-color: ... ;
}
fill in color code where dots are, like this:
background-color:#000000; //color black
Single tag:
Css code:
li.selected {
background-color: ... ;
}
Html code:
<ul>
<li></li>
<li class="selected"></li>
<li></li>
</ul>
First any css color code needs to have # followed by a 6 digit value(or 3 if they are repeating i.e #FF33FF as #F3F) and to solve your second part do this
CSS
#abas li {
background-color: #xxxxxx ;
//your other style goes here
}
#abas li.current {
background-color: #xxxxxx ;
//your other style goes here
}
HTML
<ul id="abas">
<li class="current">PROGRAM</li>
<li>PROC</li>
<li>DDNAME</li>
</ul>
To change the background color simply style it:
<li style="background-color:blue;">Program</li>
You will likely also want to set some height and width parameters.
This will make the first item have a red background:
<li style="background: red">PROGRAM</li>
If you want to for example add green to a <li> tag you can do the following:
<li style="background: green;">PROGRAM</li>
But this isn't really best practice because normally you want to keep your HTML and CSS separated. So in CSS you would do it like this:
li { background: green; }
or use hex color codes:
li { background: #00ff00; }
If you only want to change one specific <li> tag you can add a class to it:
<li class="precious">
and then apply a css rule to this class:
.precious { background: #00ff00; }
and only this <li> tag with the .precious class is going to get styled.
Live Example: http://jsfiddle.net/pulleasy/WEdmt/
You can also make your life a whole lot easier with the border-radius element. for what you are doing it would be:
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
float: left;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
}
This will give you the same result. Also for example sake, you will need to add a height and a width to get some sort of result. so if that were the case you would need to do this:
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
float: left;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
height: 100px;
width: 100px;
}
This will give you the result that I think you were looking for. If you are looking to use pixels instead of percents for a fluid layout, the you will need to use this. (Note this is only for the width, height and positioning).
#abas li a {
text-decoration: none;
background-color: 3B31FF;
color: black;
margin-right: 20px;
border-radius: 23px 0px 0px 0px;
padding-top: 10px;
padding-right: 100px;
padding-bottom: 10px;
padding-left: 10px;
position: absolute;
height: 10%;
width: 10%; /*Replace these percentiles with your width and height*/
}
I will assume that you know how to make the
An alternative to using hex code is using RGB / RGBA:
background-color:rgb(255,0,0);
background-color:rgba(255,0,0,0.5);
This gives you even more control over your color by adding alpha and transparency support, but unfortunately, it's not supported by some browsers (IE, namely, although I don't know about IE 10).
I've got:
<div class="cardDisplay">
<img class="cardImg" id="cardImg4" alt="Card" src="picture.jpg" width="148" height="236.8" title="">
</div>
Here's my CSS.
.cardDisplay
{
width: 1020px;
background-color: #040D14;
margin: auto;
position: relative;
}
.cardImg
{
padding:0px;
padding-left: 40px;
padding-right: 0px;
/* background-color: black; */
}
#cardImg4
{
border: 20px solid white;
padding-right: 30px:
}
The problem is I cannot get the, I thought, more specific ID to override the class. I've tried doing it a number of different ways with no luck. I'm using Chrome if that matters. Thanks.
You have a colon : instead of a semi-colon ; in your padding-right style for #cardImg4. The rule probably isn't being applied at all.
You should be aware that you have a : not ; after the #cardimg4 padding-right. This might affect it.