问题描述:

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.

网友答案:

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){...}
网友答案:

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.

相关阅读:
Top