How to Select a Text (Without Tag) in a Div Using CSS Selector

How to select a text (without tag) in a div using CSS selector?

It's not possible to do in a clean manner with pure CSS.

As Vangel as suggested I recommend setting the styling for it in a .foo selector then apply overrides for other elements:

.foo{
  //Some text styles
}
.foo *{
  //Overriding styles
}

However the best option would be to make changes to the HTML to place the text in its own element so it can be styled in isolation:

<div class="foo">
    <h3>Title</h3>
    <span>Some text</span>
    <div class="subfoo">Some other text</div>
</div>

.foo span
{
   //Some text styling
}

How to apply CSS to text that is NOT inside a certain tag?

You can't apply CSS in that way, but you could use negative margins:

<html>
<head>
<style>
body {
    padding-left: 100px;
}

div {
  margin-left: -100px;
}
</style>
</head>
<body>

<div style="background-color: blue;">This is a div</div>
This is not a div

</body>
</html>

Result: https://codepen.io/cmbuckley/pen/zjOXWN

CSS Selectors - How to extract a string that doesn't belong to a tag?

It is not good way to put raw text in div in this situation.
I recommand you to put span or other inline tags and then put your string in it, then the problem will get much easier.

If you want to extract only string in this situation, you can use textContent property.

const class1 = document.getElementsByClassName('class1')[0]
const class2 = document.getElementsByClassName('class2')[0]
const text1 = class1.textContent
const text2 = class2.textContent
console.log(text1.substr(0, text1.lastIndexOf(text2)))

<div class="class1">
this is string hi hi hi
    <div class="class2">
        hi 
    </div>
</div>

CSS Selector to get the immediate text

You can by adapting any other child in .price:

.price {
  color: red;
}
.price > * {
  color: black;
}

<p class="price">
    £5022.2
    <span class="sub-price tax-price">(£126.68nbsp;incl VAT)</span>
</p>

How to target direct text and not text within tags?

`h1:not(small)`

Your selector h1:not(small) doesn't work because it says this:

Target all h1 elements that are not small elements.

It's that same as using the h1 selector by itself.

`h1 :not(small)`

You would have been closer with h1 :not(small), which says:

Target all descendants of an h1 except small elements.

Boom! Exactly what you want.

Except that text contained directly inside an element (i.e, text with no tags around it) becomes an anonymous element. And anonymous elements are not selectable by CSS.

h1 :not(small) {  color: orange;}

<h1>This text is contained directly inside the container. It is not selectable by CSS. It is an anonymous element. <small>This text is inside a small element</small></h1>
<hr>
<h1><span>This text is contained in a span. It is selectable by CSS</span> <small>This text is inside a small element</small></h1>

How do I select to a div tag without class or id

div {
    /* your styles */
}

will work if you want to change the styles of all divs.

Otherwise, you can narrow this down, e.g.

.someClass div {
    /* your styles */
}

would change the style of all divs inside an element with the class someClass.

How to select a specific text using CSS selector

CSS does not have any method like text. So in HTMLDOM, it is not possible at this point of time to locate the element based on text.

Moving further, You could do below in nightwatch.js

.useXpath().click('//span[contains(text(), "' + desiredText+ '")]')

and before calling this assign Auto-Publish to the desiredText variable.

How to Select a Text (Without Tag) in a Div Using CSS Selector