Asked  7 Months ago    Answers:  5   Viewed   29 times

I'm trying to figure out why one of my css classes seems to override the other (and not the other way around)

Here I have two css classes

.smallbox { 
    background-color: white;
    height: 75px;
    width: 150px;
    font-size:20px;
    box-shadow: 0 0 10px #ccc;
    font-family: inherit;
}

.smallbox-paysummary {
    @extend .smallbox; 
    font-size:10px;
}

and in my view I call

<pre class = "span12 pre-scrollable smallbox-paysummary smallbox "> 

The font (The overlapping element) shows up as 10px instead of 20 - could someone explain why this is the case?

 Answers

86

There are several rules ( applied in this order ) :

  1. inline css ( html style attribute ) overrides css rules in style tag and css file
  2. a more specific selector takes precedence over a less specific one
  3. rules that appear later in the code override earlier rules if both have the same specificity.
  4. A css rule with !important always takes precedence.

In your case its rule 3 that applies.

Specificity for single selectors from highest to lowest:

  • ids (example: #main selects <div id="main">)
  • classes (ex.: .myclass), attribute selectors (ex.: [href=^https:]) and pseudo-classes (ex.: :hover)
  • elements (ex.: div) and pseudo-elements (ex.: ::before)

To compare the specificity of two combined selectors, compare the number of occurences of single selectors of each of the specificity groups above.

Example: compare #nav ul li a:hover to #nav ul li.active a::after

  • count the number of id selectors: there is one for each (#nav)
  • count the number of class selectors: there is one for each (:hover and .active)
  • count the number of element selectors: there are 3 (ul li a) for the first and 4 for the second (ul li a ::after), thus the second combined selector is more specific.

A good article about css selector specificity.

Tuesday, June 1, 2021
 
Pwner
answered 7 Months ago
34

Yes, it is possible - see this:

demo

.circle {
  position: relative;
  margin: 7em auto;
  width: 16em;
  height: 16em;
  border-radius: 50%;
  background: lightblue;
}

.arc {
  overflow: hidden;
  position: absolute;
  /* make sure top & left values are - the width of the border */
  /* the bottom right corner is the centre of the parent circle */
  top: -1em;
  right: 50%;
  bottom: 50%;
  left: -1em;
  /* the transform origin is the bottom right corner */
  transform-origin: 100% 100%;
  /* rotate by any angle */
  /* the skew angle is 90deg - the angle you want for the arc */
  transform: rotate(45deg) skewX(30deg);
}

.arc:before {
  box-sizing: border-box;
  display: block;
  border: solid 1em navy;
  width: 200%;
  height: 200%;
  border-radius: 50%;
  transform: skewX(-30deg);
  content: '';
}
<div class='circle'>
  <div class='arc'></div>
</div>
Thursday, June 3, 2021
 
SubniC
answered 6 Months ago
70

Generally the last rule takes precedence. With that being said, there are "exceptions" in that inline styles take precedence over external stylesheets ( an inline !important is more important than an external !important, etc ), and more specific selectors override generic selectors.

Read all about it @ http://www.w3.org/TR/CSS2/cascade.html

Saturday, July 17, 2021
 
Sagar
answered 5 Months ago
65

Yes it is via the new step-function easing curves property.

Instead of "ease-in" etc. use "step-start" or "step-end" which will make the transition happen instantaneously either at the beginning or end of the time period specified in transition-duration.

You can also have multiple steps: "steps(N, start | end ])" which will have the transition happen in equally spaced steps.

AFAIK this is only supported in Chrome to date.

Wednesday, August 25, 2021
 
xosp7tom
answered 3 Months ago
32

Technically it's the remainder operator (more mathematical minds than mine say modulus would handle sign differences differently), and it has the same precedence and associativity as multiplication and division.

So

var num = 15 % 2 + 6 * 4;

is

var num = (15 % 2) + (6 * 4);

MDN has a handy article on operator precedence and associativity.


Re your comment on the question:

...I get the num variable value of 25 with the example code, yet var num = 3 * 15 % 2 + 6 * 4; also results in a num variable which a console.log shows as also bearing the value of 25...

That's because both 15 % 2 + 6 * 4 and 3 * 15 % 2 + 6 * 4 are 25. Let's break it down:

Your first example: 15 % 2 + 6 * 4

15 % 2 + 6 * 4
1      + 6 * 4
1      + 24
25

Your second example: 3 * 15 % 2 + 6 * 4

3 * 15 % 2 + 6 * 4
45     % 2 + 6 * 4
1          + 6 * 4
1          + 24
25
Friday, September 3, 2021
 
jbowman
answered 3 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share