How to target the text in an element but not the text in nested elements with CSS


Tags: html,css

Problem :

I have a strong tag inside a div and inside the div (before the strong element) I have text:

<div class="div1">
    "Text"
    <strong>
        "Text 2"
    </strong>
</div>

I want to apply a style to .div1, but not the strong element.



Solution :

Text nodes cannot be selected nor styled using CSS. If you want to select the text only, you will need to use another element (adding an extra node that can be styled) like this:

<div class="div1">
    <span>"Text"<span>
    <strong>
        "Text 2"
    </strong>
</div>

CSS:

.div1 span {
    /* Your rules */
}

Added from my comment:

You could also consider applying a style to the div, then applying a style to the strong that reverses that style. As an example situation, your document's default text color is black, and you want to make the text in the div red with the exception of the strong element. So you apply a red text color to the div, and a black text color (which basically reverses the red color) to the strong element.


    CSS Howto..

    hide/show html div with javascript

    How to make child element do not fill his parent when hover is performed in CSS?

    How to hide :before in overflow:hidden element

    How to link CSS file from css folder in wordpress

    How to have different size images fluidly respond CSS?

    How to improve this code to combine/compress CSS using PHP [closed]

    How to adapt a flex div's width to content

    how to keep form element inline with text on headline in HTML/css/boostrap 3?

    how to change the background of a css-class by hover a button?

    CSS Icons are working locally in the app, but are not showing on Heroku?

    How to visually indicate current page in ASP.NET MVC?

    How do I get a video to fit in a specified area?

    How can I instantly stop a CSS animation on hover?

    How to finish my modal ajax code to work correctly?

    How to create slideshow in css without having to make more than one class?

    How to make div fill the rest of viewport with keeping of aspect ratio (CSS or jQuery)?

    How to move div to top and remove?

    How to have CSS animation only on click and not on page load?

    How to write CSS to convert div elements into a 3 or 4 column table?

    With html tables, using CSS, how do I get the tables next to each other?

    how to add a border-radius css curl

    How to set z-index in css background

    How to dynamically set the height in a CSS-class depending on the browser's window size with Javascript / jQuery?

    How to Make Text Stay Inside Div?

    How to find out an element with id partially matched, and change its css style?

    How to make a HTML list appear horizontally instead of vertically using CSS only?

    How to format a title attribute with css (setting more width)?

    how to show css text in html div

    How to change css display none or block with button click

    how to fill div with full height of page in css? (page is taller than 100%) for ajax loading gif background