CSS không có anh em chọn

Question

Cân nhắc html sau:

<div> 
    <div class="iwant" /> 
    <div class="idontwant" /> 
</div> 
<div> 
    <div class="iwant" /> 
</div> 

Tôi quan tâm đến một selector (đối với thu thập nội dung vì vậy tôi không thể sửa đổi html) mà sẽ chọn tất cả iwant mà KHÔNG có anh chị em ruột với lớp idontwant.

Answer 1

Không có bộ chọn anh chị em nào phù hợp với yếu tố (hoặc không) theo lớp.

Bộ chọn gần nhất tôi có thể nghĩ đến là

.iwant:only-child 

Nhưng chọn này có nghĩa là không thể có bất kỳ yếu tố khác ngoài div class="iwant" rằng là con cái của cha mẹ div, bất kể loại hoặc lớp học. Điều này có thể đáp ứng nhu cầu của bạn tùy thuộc vào cấu trúc của HTML của bạn, do đó, nó có giá trị một thử. Tuy nhiên, nếu tên lớp là một vấn đề đối với bạn, thì có lẽ không có nhiều giải pháp, bởi vì không có lớp giả trong lớp :only-of-class trong CSS sẽ lọc theo lớp và bỏ qua phần còn lại.

Answer 2

Không có bộ chọn CSS phủ định-anh chị em nào. Sử dụng bộ chọn anh chị em để thiết lập phong cách mới, sau đó thiết lập lại các phong cách tại .idontwant:

div.iwant { 
    /*Set CSS here*/ 
    display: inline; 
} 
div.iwant ~ div.idontwant { 
    /*Reset CSS*/ 
    display: block /* Default of DIV is block*/ 
} 

Answer 3

Không có cách nào tốt để nhắm mục tiêu một mục mà không có một mục anh chị em cụ thể. Nhưng bạn có thể sử dụng .iwant:last-child để nhắm mục tiêu các mục không có anh chị em tiếp theo.

Ví dụ: http://codepen.io/martinkrulltott/pen/YyGgde