Combination of :first-child and #id selectors in :not() doesn't work

Question

I am having trouble with :not() css selector. I check already on stackoverflow, but nothing is working. The problem is when I combine :first-child selector with id selector. I am working with Bitrix CRM, so I need to override some of its css, for this purpose I use "!important" (hardcore). Here is a code:

.crm-offer-info-table tr:not(:first-child) {
    float:right!important;width:49%}
.crm-offer-info-table tr:nth-child(2n+2):not(#section_contact_info_contents>tr) {
    float: left!important;
    padding-right: 10px;
    width:49%
}

HTML part

    <table id="section_contact_info_contents" class="crm-offer-info-table"><tbody>
<tr id="section_contact_info">
            <td colspan="5">
                ..some code..
            </td>
        </tr>
    <tr id="email_wrap" class="crm-offer-row">
                <td class="crm-offer-info-drg-btn"></td>
                <td class="crm-offer-info-left">
                </td><td class="crm-offer-info-right"></td>
                <td class="crm-offer-info-right-btn"></td>
                <td class="crm-offer-last-td"></td>
    </tr>
    <tbody>
</table>

http://jsfiddle.net/d990f0a1/

So, the main question is .crm-offer-info-table tr:not(:first-child, #section_contact_info_contents>tr){} it doesn't work, I need to somehow combine these 2 selectors in :not(), and all this must be done in css too.

Answer 1

As the :not specs says, it works with simple selectors and #section_contact_info_contents>tr is not; you can split it using 2 :not selectors in this way:

.crm-offer-info-table:not(#section_contact_info_contents) tr:not(:first-child){...}

Answer 2

tr:nth-child(2n+2):not(#section_contact_info_contents>tr) doesn't make sense since your table only has 2 rows. Putting aside what jakopo87 answered just for a minute (jakopo87 is right about simple selectors), let's consider what this rule set is saying:

.crm-offer-info-table tr:nth-child(2n+2)

what I think you mean is:

ANY even numbered row that is inside of ANY table which is class="crm-offer-info-table" ...

If that's what you meant, then this is how it should be:

.crm-offer-info-table > tbody > tr:nth-child(2n)

Next is this:

:not(#section_contact_info_contents>tr)

What I think you mean is:

... BUT exclude ALL rows inside a UNIQUE table which is id="section_contact_info_contents" .

If that is in fact your intention, then this is how it should be:

:not(#section_contact_info_contents > tbody > tr);

Of course if you exclude ALL rows of a table, that's basically excluding the table itself (in this context at least). So I suggest (as did jakopo87) you use a less verbose rule set:

:not(#section_ contact_info_contents *) or even :not(#section_contact_info_contents)

If you must use CSS rather than JS, then try using nth-of-type instead. Then you won't have to remember that tbody is the child of table , and tr is the child of tbody .

If I remember correctly you wanted the td that has a textarea to be in it's own column. Try display: table-column on the tr or td . Sorry I can't be more specific, but the info you posted does not include a full layout I suspect. Without the proper knowledge of the layout, advice on HTML/CSS is like horseshoes and hand grenades.