selection of an element using css :not() - html

Question

i have to set of buttons one have no icon and one have icons. i want to define a special css which has no icon..
My codes are
for first type of button:-
<div class="btn-double-horizontal">
<button type="button" class="btn btn-lg btn-base-white border-base thin">register now</button>
<span>or</span>
<button type="button" class="btn btn-lg btn-base-white border-base thin">login here</button>
</div>
and for second type (with icon):-
<div class="btn-double-horizontal">
<button type="button" class="btn white rounded bg-wisteria btn-lg"><i class="fa fa-instagram white bullet"></i>Instagram</button>
<span>or</span>
<button type="button" class="btn white rounded bg-green-sea btn-lg"><i class="fa fa-linkedin white bullet"></i>Linked in</button>
i want to apply style for buttons which has no icon.Obviously they are both btn-lg (class)

Answer 1

If I'm understanding this correctly, you want to target the first type of button you laid out in your question, correct?
If so, since the two button types don't share all the same classes, you could do something like this:
.btn.btn-base-white {
/* This targets the first type of button only */
}
This doesn't require the use of the :not() selector, which really is only an issue in IE8, but I don't know what browsers you need to support, so better safe than sorry.
Of course, this assumes you can't add another class. If you can add a new class to the buttons without an icon, that may make your CSS easier to work with down the road...

Answer 2

In your examples, .btn-lg:not(.btn-base-white){...} would do the trick, if you want to use :not()

Answer 3

If you are trying to apply the special CSS to all buttons that do not contain an icon, you will have to add an icon class to buttons that contain an icon. Then use can target them with button:not(.icon). You can not look for buttons that do not contain an icon in CSS because there is no parent selector
Example:
.button{
/* button css */
}
.button:not(.icon){
/* button with no icon css */
color: #f00;
}
<button class="button icon">icon</button>
<button class="button">no icon</button

Answer 4

1) The best way to do this is to make 2 custom classes:
First: With the icons (.with-icon)
.with-icon{//code for iconed button goes here. }
Second: Without icons (.no-icon)
.no-icon{//code for non-iconed button goes here. }
And, then do the required changes based on the 2 classes for your both item types.
2) For your present case scenario, you might make use of the classes that are already in your 2 types of buttons, viz.
.btn-base-white {//code for non-icon button goes here }
.bg-wisteria {//code for iconed button goes here }
3) If you still want to use .not then go as follows:
button:not(.btn-base-white ) {//code for iconed button goes here}
button:not(.bg-wisteria) {//code for non-iconed goes here}
Hope, that helps!