I have done the following:
#my-el .some-class {
width: 10%;
}
That works but now I'd like to apply the same class to the element #my-new-el. I've tried:
#my-el #my-new-el .some-class {
width: 10%;
}
But this does not work. What would be the correct syntax to achieve this ?
If .some-class only applies to descendents of #my-el and #my-new-el then you need to specify the two selectors in full, separated by a comma:
#my-el .some-class, #my-new-el .some-class {
width: 10%;
}
Related
We have a large CSS file with many styles that contains overriden styles like this:
.block {
width: 100px;
}
...
.block {
width: 200px;
}
We want to automatically remove unused styles and get as result only 1 style property value for the class like this:
.block {
width: 200px;
}
https://purifycss.online/ - This does not solve our problem.
purifycss
How can I do it having only html and CSS files?
I am having a problem with some new CSS due to an update of our plugin. The page in question is here: https://www.renophil.com/event/ghostbusters-in-concert/
Basically from the title below the image down to the share icons should be a left column. Then the description that starts with "Kick off your Halloween weekend..." should be a larger right column.
We are using Wordpress and Visual Composer. The left column uses the class of vc_col-sm-4 and the right uses vc_col-sm-8. These are set to have the correct widths and work on mobile devices.
.vc_col-sm-4 {
width: 33.33333333%;
}
.vc_col-sm-8 {
width: 66.66666667%;
}
The problem is that the plugin we use for the events (The Events Calendar) has this CSS rule:
.tribe-events-single>.tribe_events>:not(.primary,.secondary,.tribe-events-related-events-title,.tribe-related-events) {
order: 1;
width: 100%;
}
which is overriding the width of my columns mentioned above. I thought I could fix it with width:auto but it didn't work. Is there a way to cancel it or do I have to add !important to the .vc-col-sm-4 and .vc-col-sm-8 code?
Try adding specificity to the classes controlling the widths when that overriding events class is present. This should help get you in the right direction.
#media (min-width: 768px) {
.tribe-events-single > .tribe_events .vc_col-sm-4 {
width: 33.33333333%;
}
.tribe-events-single > .tribe_events .vc_col-sm-8 {
width: 66.66666667%;
}
}
The CSS rule:
.tribe-events-single>.tribe_events>:not(.primary,.secondary,.tribe-events-related-events-title,.tribe-related-events) {
order: 1;
width: 100%;
}
has a greater DOM precision and has priority. You can use !important as you said:
.vc_col-sm-4 {
width: 33.33333333% !important;
}
.vc_col-sm-8 {
width: 66.66666666% !important;
}
or add Additional CSS from the theme preview mode and target the id element #tribe-events-content
div#tribe-events-content div.vc_col-sm-4 {
width: 33.33333333%%;
}
div#tribe-events-content div.vc_col-sm-8 {
width: 66.66666666%;
}
I'd like to specify a CSS rule (using SASS/SCSS) for a specific div, located as follows,
<div class="parent-div">
<div class="first-child has-this-class">
......
</div>
<div class="second-child">
.....
</div>
I need to write a specific CSS rule to "second-child", when the first child has the class "has-this-class".
I tried to use SCSS as this, but it didn't work.
.parent-div{
.first-child{
&.has-this-class + .second-child{
//Write the styles here
}
}
}
you can try this
.parent-div{
.first-child:has(.second-child){
//Write the styles here
}
}
but :has() selector isn't supported by all browsers look at can I use
This code will affect both the first and second child
.parent-div {
.first-child {
&.has-this-class,
+ .second-child {
width: 200px;
height: 200px;
background-color: crimson;
}
}
}
I'm just curious to know if it is possible to have specific stylings based on the name of of a class.
For example, Bootstrap 4 has a helper class for margins and padding like:
<div class="m-t-1 p-a-0"></div>
This gives the div 1em of margin to the top, and removes padding from all sides.
I am sure they have pre-styled this class in their CSS to achieve this.
But I am curious if there is a way to use the class as a variable.
for example:
<div class="fs-x"></div>
where x can be any number, this class would then give the styling the font-size: x to the div.
Is this possible to do?
Thanks.
You can use a CSS pre-processor such as SASS or LESS to achieve this however it generates static classes within a specified range below is an example from the SASS documentation:
$class-slug: for !default
#for $i from 1 through 4
.#{$class-slug}-#{$i}
width: 60px + $i
Which emits this CSS:
.for-1 {
width: 61px;
}
.for-2 {
width: 62px;
}
.for-3 {
width: 63px;
}
.for-4 {
width: 64px;
}
All CSS classes must be explicitly defined. So every variation if X would need to exist in a .css file
you can use constant in css for example
$x = 10px;
img{
margin-bottom : $x;
}
but however you can declare variables with this way
:root {
--color-principal: #06c;
}
#foo h1 {
color: var(--color-principal);
}
Suppose I have two virtually identical HTML structures, but with different class names. They only differ by a few variables, like width and height. By using SASS/SCSS variables I thought I could do something like this:
.widget-a {
$width: 50px;
}
.widget-b {
$width: 100px;
}
.widget-a,
.widget-b {
button {
background: red;
width: $width;
}
}
This would let me write a single piece of SASS nested code for both widgets a and b. However, variables are only visible inside a nested scope, so SASS returns 'variable undefined' errors. Of course I could rewrite it by simply doing something like:
.widget-a,
.widget-b {
button {
background: red;
}
}
.widget-a {
button {
width: 50px;
}
}
.widget-b {
button {
width: 100px;
}
}
But that seems pretty cumbersome. Is there any other method of making this work?
Variables in SASS are only scoped to the block they appear in. Your first .widget-a declaration and the one declaring both A and B are two separate scopes. You'll have to do something like this (assuming you need to use the widths more than once):
$wbackground: red;
.widget-a {
$wawidth: 50px; /* widget A width */
button {
background: $wbackground;
width: $wawidth;
}
}
.widget-b {
$wbwidth: 100px; /* widget B width */
button {
background: $wbackground;
width: $wbwidth;
}
}
Ran into the same problem, this is how I'm going to try to solve it... (this works)
#mixin foo($type:"default")
.mClass
$bg: inherit
#if $type == "banana"
$bg: yellow
background: $bg
.firstClass
#include foo
.secondClass
#include foo("banana")
Your problem can be solved by using a mixin.
#mixin button($width){
button{
background:red;
width:$width;
}
}
.widget-a{ #include button(50px); }
.widget-b{ #include button(100px); }
I don't see the advantage of creating a mixin only for this specific situation, it is hardly useful on a couple of occasions, but it is just my opinion.
Anyway, I've created a mixin, just for fun. I think that it can help you to deal with this specific situation. Here is the mixin and I'm going to try to explain how it works:
#include button($selectors, $property, $values, $child: false) {
// Common properties that are included in all $selectors
}
This mixin takes four parameters:
$selectors: List of selectors, in your case, .widget-a and .widget-b, they should be enclosed in quotes.
$property: Here you should enter the name of the property, in your case width
$values: Values are, as the name implies , the values of the property for each selector
$child: Here you can enter the name of a child, this is optional.
Into the brackets {} you should write all the properties that you want to include in all $parameters
The order of each selector must match the order of their corresponding value
So, here's an example using this mixin to solve your problem. This is the #include:
#include (".widget-a" ".widget-b", width, 50px 100px, button) {
background: red;
}
And this, the code that returns:
.widget-a button, .widget-b button {
background: red; }
.widget-a button {
width: 50px; }
.widget-b button {
width: 100px; }
This is another way to achieve the same result:
#include button(".widget-a .button" ".widget-b .button", width, 50px 100px) {
background: red;
}
Download the mixin here