CSS Use :Not Id with Class

CSS use :not ID with CLASS

I believe that you are reversing the selectors. You have some elements with the same class, but you want to filter out an element with an specific ID. In that case:

HTML:

<p class="someclass">hello</p> <!-- will be targeted by css below, thus green -->
<p class="someclass" id="some-id">hi</p> <!-- will not be targeted by css below -->

CSS:

.someclass:not(#some-id){ color: green; } 
/* selects all elements with classname 'someclass', 
   but excludes the one that has also has an id of 'some-id' */

And as @secretSquirrel pointed out, note the browser compatibility: this selector is not supported by Internet Explorer 8 and older.

Select the only Element with no class or ID

You can use the :not:

CSS:

div:not([class]):not([id]) {
    height: 200px;
    width: 200px;
    background-color: red;
}

HTML:

<div></div>
<div class="shikaka"></div>
<div id="shikaka2"></div>    

http://jsfiddle.net/qcq0qedj/

CSS class applying but not id

ID's shouldn't start with a number , while you can still try out this:

[id='0'] {
 /* should work */
}

 #0 {
  /* shouldn't work */
}

DEMO

ID-Selector in combination with Class-Selector not working

Remove the space between the ID and the class selector

#result.red1 {
  color: #FF0000;
}

"#result .red1" means find the class red1 INSIDE the result element.
It is better not to use ID as CSS selectors though.

Why not simply use class in html/css all the time instead of id?

A few reasons:

1: Id's are for targeting one element, while classes are for multiple

Example:

<div id="test">This is red</div>
<div class="test"></div>
<div class="test"></div>

#test{
background:red;
}

2: Id's overrule classes in CSS

Example:

<div class="test" id="test">Test</div>
#test{ 
background:red;//Overrides, even though it is higher in the document
}
.test{
background:blue;
} 

3: Id's are used for anchor links in HTML

Example:

<a href="#test">Link to test</a>
<div id="test"></div>

4: Id's are easier to select with JavaScript

<div id="test"></div>
<div class="test"></div>
document.getElementById("test"); //returns the element
document.getElementsByClassName("test"); //returns a HTMLCollection, which is like an array 

Benefit of using class instead of id

<div class="some_class">

    <p>This can be used any number of times on one HTML page</p>

</div>

<div id="some_id">

    <p>This CAN be used multiple times with the same ID,
       but it is invalid code, as a specific ID should
       only be used ONCE per html page</p>

</div>

Here's an older yet still good explanation.

How can i style an element without adding a class or id to my HTML?

You can use last-child or last-of-type

ul li:last-child {
  background-color: green;
}

ul li:last-of-type {
  border: dotted  red
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
</ul>

---

Related Topics