Point One Style Class to Another

Point one style class to another?

You can use selector grouping:

.foo, .list1 li { 
  background-color: red; 
} 

How do i apply style from one class to another, to all items inbetween

You can simply make a selector for all the days, loop them, and then start adding the class when you get to the .day-start and stop adding when you get to the .day-end.

Something like:

var active = false;

document.querySelectorAll('.day').forEach((day) => {
    if(day.classList.contains("day-start")) {
        active = true;
    }
    if(active) {
        day.classList.add("foo");
    }
    if(day.classList.contains("day-end")) {
        active = false;
    }
});

I have created an example for you here: https://codepen.io/bj-rn-nyborg/pen/OJRJwEN

Is it possible to reference one CSS rule within another?

No, you cannot reference one rule-set from another.

You can, however, reuse selectors on multiple rule-sets within a stylesheet and use multiple selectors on a single rule-set (by separating them with a comma).

.opacity, .someDiv {
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6; 
}
.radius, .someDiv {
    border-top-left-radius: 15px;
    border-top-right-radius: 5px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;    
}

You can also apply multiple classes to a single HTML element (the class attribute takes a space separated list).

<div class="opacity radius">

Either of those approaches should solve your problem.

It would probably help if you used class names that described why an element should be styled instead of how it should be styled. Leave the how in the stylesheet.

Target a css class inside another css class

Not certain what the HTML looks like (that would help with answers). If it's

<div class="testimonials content">stuff</div>

then simply remove the space in your css. A la...

.testimonials.content { css here }

UPDATE:

Okay, after seeing HTML see if this works...

.testimonials .wrapper .content { css here }

or just

.testimonials .wrapper { css here }

or

.desc-container .wrapper { css here }

all 3 should work.

Override one css class with another?

The ".myList li" selector is more specific than the ".foo" selector, so when both rules apply, the item will be yellow. When you do "$(item).removeClass();" you remove any class names from the li, but if the ul still has it's "myList" class name, then the li will still get the styles from the ".myList li" selector.

One way to change the CSS would be to:

.myList li     { background-color: yellow; }
.myList li.foo { background-color: green; }

Then it is clear that the second rule is more specific than the first.

Targeting a class when inside another class

Yes, that's right. This will target any .default contained by a .custom (at any point in its ancestry) (fiddle):

.custom .default {
    color: red;
}

_{See the descendant combinator and others.}

And yes, it can override declarations specified by .default (fiddle):

.default {
  color: green;
}
.custom .default {
  color: red; /* overrides green */
}

_{Have a look at selector specificity.}

Is possible overwrite a css class with another css class

Update: According to ZK documentation you could use sclass attribute to add classes to any element.

So, using the code I see in your screenshot...

 <vbox>
   <combobox>
   <combobox sclass="whatever">
   <combobox>
 </vbox>

...you'll be able to use the following selector to specify rules for the <combobox>es you place whatever class on:

.v-combobox.whatever .z-combobox-input {
  border:1px solid #000;
  border-radius: 3px 0 0 3px;
  margin:0; padding:4px 5px;
  line-height: 14px;
  background: #fff;
}

For more information use this guide.

According to this guide, you should use sclass when you want to add to the default styles applied to an element and zclass attribute when you want to reset the default styles (that means only what you define in your custom class will apply, and not the default styling for that element).

---

Initial answer:

This is the most important principle in CSS and it's called specificity.

Learning CSS means learning how you can use selectors and their specificity in order to apply rules selectively to some elements and not to others. It's what CSS is typically used for and it's totally possible.

Referencing an element by its id will be stronger (and hence override) any rules specified for any of its classes.

To understand specificity, I recommend this article as a starting point. You should also search for specificity calculator in your search engine of choice.

And in order to be able to use everything you learn about specificity you'll need to understand CSS Selectors and CSS Combinators.

---

For your specific [ :) ] case, you probably want to use the element's id as selector to apply rules to that element only. Given the id from your first example, this will work:

#vXgV3-real {
  /* the rules here will override the rules for .z-combobox-input
   * for the element with id="vXgV3-real" and only for that element 
   */
  border:1px solid #000;
  border-radius: 3px 0 0 3px;
  margin:0; padding:4px 5px;
  line-height: 14px;
  background: #fff;
}

Can a CSS class inherit one or more other classes?

There are tools like LESS, which allow you to compose CSS at a higher level of abstraction similar to what you describe.

Less calls these "Mixins"

Instead of

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

You could say

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

Use :hover to modify the css of another class?

It's not possible in CSS at the moment, unless you want to select a child or sibling element (trivial and described in other answers here).

For all other cases you'll need JavaScript. jQuery and frameworks like Angular can tackle this problem with relative ease.

[Edit]

With the new CSS (4) selector :has() guide from CSS4.Rocks (archived by Wayback Machine) and :has() guide from MDN Web Docs, you'll be able to target parent elements/classes, making a CSS-Only solution viable in the near future!

---

Related Topics