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.

How about trying to remove the '>' since the tr is not a direct child of the table, there is still 'tbody'. — KiiroSora09, Aug 10 '15 at 01:27
It didn't make big difference, but thank you, I've removed > . — Anatolii Vorobiov, Aug 10 '15 at 01:54
I think the .crm-offer-info-table tr:nth-child(2n+2):not(#section_contact_info_contents tr) does not exist in your example, since all .crm-offer-info-table tr are also #section_contact_info_contents tr. — KiiroSora09, Aug 10 '15 at 02:01
As I said it is CRM, so it has lots of tables with class 'crm-offer-info-table' , I just show exclusion from the rule.
...some code.. — Anatolii Vorobiov, Aug 10 '15 at 02:09
List the targets you desire and what you need done to them, and if there's a specific order of priorities, inform us of them as well. are you just trying to exclude the first row? — zer00ne, Aug 10 '15 at 02:27
@zer00ne Well, what I am trying to do. I have all data listed in one column (i dont mean 1 td tag, I mean from that 5 td tags the actual data is filled in 2 columns), and I want to split it in 2 columns. I have achieved this by "float:left/right" and "width:49%". The problem is one table has really wide data (textarea), which should be placed in 1 column only. So, I am trying to make exclusion out of my css rule. So I cannot override float rules by other css, I need to set rule of that line which I pasted. One "tr:nth-child(2n+2):not(#section_contact_info_contents>tr)" this part works aswesome — Anatolii Vorobiov, Aug 10 '15 at 02:45
Where's the ``? Is it the 1st `<td>` that's 5 col wide? To save time I'll give you you a solution based upon the following as I understand so far: _______________1. table 5 rows + 2 cols___________________2. #section_contact_info needs to be 1 colspan instead of 5.____ _3. Assuming that this is a generated table so you have no control over how it's created._________________________4. You only have limited .control of it once it's created</td> — zer00ne, Aug 10 '15 at 04:15

score 2 · Answer 1 · answered Aug 10 '15 at 06:39

2

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){...}

answered Aug 10 '15 at 06:39

jakopo87

96
3
6

zer00ne · Answer 2 · 2015-08-11T13:42:13.507

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.

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

2 Answers2