Get Element's CSS Selector (When It Doesn't Have an Id)

Get element's CSS selector (when it doesn't have an id)

Use FireFox with FireBug installed.

• Right-click any element
• Select "Inspect Element"
• Right click the element in the HTML tree
• Select "Copy XPath" or "Copy CSS Path"

Output for the permalink to this answer (XPath):

/html/body/div[4]/div[2]/div[2]/div[2]/div[3]/table/tbody/tr/td[2]/table/tbody/tr/td/div/a

CSS Path:

html body.question-page div.container div#content div#mainbar div#answers div#answer-4588287.answer table tbody tr td table.fw tbody tr td.vt div.post-menu a

---

But regarding this comment:

my final intent is to create a css
selector for the object ...

If that is your intent, there may be an easier way through JavaScript:

var uniquePrefix = 'isThisUniqueEnough_';
var counterIndex = 0;
function addCssToElement(elem, cssText){
    var domId;
    if(elem.id)domId=elem.id;
    else{
        domId = uniquePrefix + (++counterIndex);
        elem.id = domId;
    }
    document.styleSheets[0].insertRule("#"+domId+"{"+cssText+"}");
}

The last line may need to be implemented differently for different browsers. Did not test.

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 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.

Can I write a CSS selector selecting elements NOT having a certain class or attribute?

Typically you add a class selector to the :not() pseudo-class like so:

:not(.printable) {
    /* Styles */
}

:not([attribute]) {
    /* Styles */
}

But if you need better browser support (IE8 and older don't support :not()), you're probably better off creating style rules for elements that do have the "printable" class. If even that isn't feasible despite what you say about your actual markup, you may have to work your markup around that limitation.

Keep in mind that, depending on the properties you're setting in this rule, some of them may either be inherited by descendants that are .printable, or otherwise affect them one way or another. For example, although display is not inherited, setting display: none on a :not(.printable) will prevent it and all of its descendants from displaying, since it removes the element and its subtree from layout completely. You can often get around this by using visibility: hidden instead which will allow visible descendants to show, but the hidden elements will still affect layout as they originally did. In short, just be careful.

css selector to match an element without attribute x

:not selector:

input:not([type]), input[type='text'], input[type='password'] {
    /* style here */
}

Support: in Internet Explorer 9 and higher

Selenium Driver - finding element with no ID, Name, Xpath, Tag, Class, CSS Selector

Try locating it like below:

input_field = WebDriverWait(browser, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "input[name='username']")))
input_field.click()

You will also need the following imports:

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

jQuery Select Element that has no Class or ID

withSpace - $('*:not([id]) *:not([class])'); will find all elements with no class that are inside an element without an ID. Putting a space in the selector is like calling find seperately.

You could change noSpace to be this instead and still get the right result:

var noSpace= $('*:not([id]):not([class])'); // second * not needed

JSFiddle used for testing

---

Related Topics