Is there a method to style elements without a selector/tag-CodePudding

Usually we can add CSS code to style certain elements through selecting the tag, for example:

<p> I want to design this paragraph! </p>

We can just easily state p { color: red; }

How can we achieve the same if there is no actual <p> tag or no tag at all and plain text rendered into the browser.

I want to design this paragraph!

I tried using the * in CSS but this did not work. Everything I have searched on the internet uses a tag to style elements with CSS.

Please Note: there is no way to edit the structure (HTML) of it.

CodePudding user response：

You can use parent class and then * to handle this but if you don't have anything then follow below css to achieve the same.

body:first-line {
 font-size: 32px;
 color:red;
}

I want to design this paragraph!

CodePudding user response：

For styling elements without any selector and tag you can use inline style attribute inside HTML elements. Its not recommended because you can't use some CSS features like :hover, :active and etc..

<h1 style="color:red;">Hello world!</h1>

Additionally, in CSS you can use the pseudo-class :nth-of-type():

The :nth-of-type() CSS pseudo-class matches elements based on their position among siblings of the same type (tag name).

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type