Which CSS Properties Are Inherited

Which CSS properties are inherited?

Here is the list of all inheritable properies.
I'm working with W3C's information, so I'd guess it should be correct. But knowing web browsers (IE specifically), some of these might not be inheritable by all browsers:

azimuth
border-collapse
border-spacing
caption-side
color
cursor
direction
elevation
empty-cells
font-family
font-size
font-style
font-variant
font-weight
font
letter-spacing
line-height
list-style-image
list-style-position
list-style-type
list-style
orphans
pitch-range
pitch
quotes
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
text-align
text-indent
text-transform
visibility
voice-family
volume
white-space
widows
word-spacing

CSS properties are not being inherited?

Some properties are inherited, and some aren't.

width. Inherited: no
background. Inherited: no
margin. Inherited: no
padding. Inherited: no
font-family. Inherited: yes

If you want some element to inherit the value of a non-inheritable property from its parent, you can use inherit value.

I suggest reading Inheritance section of the spec:

Some values are inherited by the children of an element in the document tree, as described above. Each property defines whether it is inherited or not.
When inheritance occurs, elements inherit computed values. The computed value from the parent element becomes both the specified value and the computed value on the child.
Each property may also have a cascaded value of 'inherit', which means that, for a given element, the property takes the same specified value as the property for the element's parent. The 'inherit' value can be used to enforce inheritance of values, and it can also be used on properties that are not normally inherited.

Specificity of inherited CSS properties

Any declaration that matches element directly will get priority over the property that's inherited from the element's parent. Specificity has nothing to do with that.

How can I tell if a particular CSS property is inherited with jQuery?

To actually determine whether a css style was inherited or set on the element itself, you would have to implement the exact rules that the browsers apply to determine the used value for a particular style on an element.

You would have to implement this spec that specifies how the computed and used values are calculated.

CSS selectors may not always follow a parent-child relationship which could have simplified matters. Consider this CSS.

body {
    color: red;
}

div + div {
    color: red;
}

and the following HTML:

<body>
    <div>first</div>
    <div>second</div>
</body>

Both first and second wil show up in red, however, the first div is red because it inherits it from the parent. The second div is red because the div + div CSS rule applies to it, which is more specific. Looking at the parent, we would see it has the same color, but that's not where the second div is getting it from.

Browsers don't expose any of the internal calculations, except the getComputedStyle interface.

A simple, but flawed solution would be to run through each selector from the stylesheets, and check if a given element satisfies the selector. If yes, then assume that style was applied directly on the element. Say you wanted to go through each style in the first stylesheet,

var myElement = $('..');
var rules = document.styleSheets[0].cssRules;
for(var i = 0; i < rules.length; i++) {
    if (myElement.is(rules[i].selectorText)) {
        console.log('style was directly applied to the element');
    }
}

List of attributes inheriting their values from parents by default

Not peer-reviewed but check-out https://github.com/igoradamenko/inherited-css-properties

CSS properties inheritance and overriding in a nested HTML structure

Use CSS variables. The trick is that the custom property (the CSS variable) is inherited until you override it at a deeper level.

div {
  margin: 1em;
  padding: 1em;
  color: white;
}
div.area {
  border: 2px solid var(--c,gray);
}

div.bg-orange {
  background-color: sandybrown;
  --c: orange;
}

div.bg-red {
  background-color: lightpink;
  --c: red;
}
div.bg-green {
  background-color: lightgreen;
  --c: green;
}
div.bg-blue {
  background-color: lightblue;
  --c: blue;
}

<div class="area bg-blue">
  <div class="area">Plain</div>
  <div class="area bg-green">
    Green
    <div class="area bg-red">Red</div>
    <div class="area">
      Should should be green border
      <div>Plain no border</div>
      <div class="area">Plain should be green border</div>
      <div class="area bg-red">
        Red
        <div class="area bg-orange">
          Orange
          <div class="area">Plain should be orange border</div>
        </div>
      </div>
    </div>
  </div>
</div>

How to prevent css inheritance?

You selector is correct and its rule-set applies only to the immediate divs of the .parent element. The problem is with the color property, because color is an inherited property. So all elements inside .parent > div will have color: red, even if they are spans, sections etc.

An easy approach to deal with that is to set all divs with some color, and then add your selector. But as you can see in the example below all the elements inside our target div have their color as red, apart from the ones that we have set them elsewhere.

div {
  color: black;
}

.parent > div {
  color: red;
}

<div class="parent">
  <div> DIV A
    <div> DIV B </div>
    <span> SPAN </span>
  </div>
</div>

Which CSS Properties Are Inherited