CSS Overwrite issue - html

Question

I have a CSS-overwriting issue. There is a parent selector for a whole div which sets the styling for all inputs within. I have some inputs in it which I do want to have another styling for. Even though I put these stylings below the parents in the CSS-file, they still can not overwrite the parents css. Please see embedded CSS for further explanation. (I prefer to not use !important).
The CSS that gets applied (defined at the top of CSS-file)
#content #newPost .inner .inputs button {
width: 70%;
height: 50px;
background-color: #F7F9FA;
text-align: center;
margin: 15px 0 0 15%;
cursor: pointer;
border: 1px solid #A0A0A0;
transition: 0.2s;
}
The CSS that should get applied (defined at bottom)
#resultArray .team button {
width: 40px;
height: 100%;
border: none;
background-color: #E3E8E8;
color: #000;
padding: 0;
text-align: center;
margin: 0;
cursor: default;
}
HTML
<div id='newPost'>
<div class='inner'>
<div class='inputs'>
<div id='resultArray'>
<div class='current'><button disabled>1</button><input>
</div>
</div>
<input placeholder='Title'>
<textarea placeholder='Content'></textarea>
<button id='publishPost'>Publish</button>
</div>

Answer 1

So far I got from your CSS and markup code problem is chaining in CSS selection. You can try apply following selector:
#content #newPost .inner .inputs #resultArray button {
width: 40px;
height: 100%;
border: none;
background-color: #E3E8E8;
color: #000;
padding: 0;
text-align: center;
margin: 0;
cursor: default;
}
Also when you try to override long chain CSS selector you should understand properly CSS Selection Precedence rules.
How long is CSS selection chain it's dose not matter if you uderstand following precedence:
In CSS slection every selector have a mathamatical value: each tag = 1, each .class = 10 or pseudo class such as :hover, :active = 10, #id = 100, inline styling = 1000 and for !important = infinity. You can't never override one !important without another !important.
So form your first selection is "#content #newPost .inner .inputs button" = 100 + 100 + 10 + 10 + 1 = 221
But for "#resultArray .team button" = 100 + 10 + 1 = 111
So second selection will never precedence over first selection.
Also for better understanding see here.

Answer 2

you have extra close this div
<div id='resultArray'>
<div class='current'><button disabled>1</button><input>
</div>
</div>
remove this one and
justify you code like:
<div class='inputs'>
<div id='resultArray'>
<div class='current'><button disabled>1</button><input>
</div>
<div class='int'>
<input placeholder='Title'>
</div>
<div class='int'>
<textarea placeholder='Content'></textarea>
</div>
<button id='publishPost'>Publish</button> -->
</div>
than start work : https://jsfiddle.net/yhsLvc7g/1/

Answer 3

edit: wait... also there is no .team class in your html, so that selector points nowhere
--
Your first selector is WAY more specific than the bottom one, so it will be applied despite being above in the cascade flow.
You need to beat the specificity of the 2 ids, 2 classes and 1 tag of the top selector. That's A LOT of specificity, which means you need to use at least 2 ids + at least 2 classes + at least 1 tag to beat it, then the cascade will take over. Setting an additional class (so 2 + 3 + 1) or an additional ID (so 3 + 2 + 1) will beat it too.
So you need to do something ridiculous like
#content #newPost .inner .inputs #resultArray .team button
That being said, your CSS is extremely overqualified, which means you'll encounter issues like these by the millions.
What you should really be doing is changing the first selector (and all those that you have in such fashion) for less specificity, something like
.inner .inputs button
will probably do the trick
Here's a good resource to understanding CSS specificity: