CSS selector for the only child element without any other adjacent sibling elements that are non-space characters

Question

CSS selector for the only child element without any other adjacent sibling elements that are non-space characters

Here is a snippet of my code:

<!DOCTYPE html>
<html>
  <head>
  <style>
code {
  display: inline-block;
  padding: 0;
  color: red;
}
p > code:only-child {
  display: block;
  white-space: pre;
  padding: 20px;
  line-height: 125%;
  background: #eee;
  border: 1px solid #ccc;
  margin: 1em 0;
}

  </style>
  </head>
  <body>
<p>Assuming you have the IP <code>1.1.1.1</code>:</p>

<p><code>
echo "hello world";
echo "another command here";
echo "you are done";
</code></p>
</body></html>

However, this is causing an issue with how the page displays:

https://i.stack.imgur.com/LtM6O.png

The problem arises from the p > code:only-child selector also affecting the <code>1.1.1.1</code>. What CSS rule can I use to target a <code> element only if it's the sole child and has no non-space character siblings?

Just to note: I am unable to modify the HTML directly as it was generated by inaccessible software. Additionally, JavaScript is off-limits for me. I am only permitted to add my own CSS rules.

I have numerous HTML documents like this one. Some contain segments like

<p>some text<code>/etc/path-to-conf</code>some text</p>

, others have

<p>text<code>...</code>text<code>...</code>...</p>

, and some simply consist of

<p><code>...</code></p>

. I wish to automate the process so that any <code> element which stands alone without non-space character siblings appears as a block level element, while all other instances appear as inline-block elements.

html css

Answer 1

Answer №1

Perhaps it could be done like so:

 p:has(code) code {
        color: red;
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">>
    <title>Document</title>
</head>

<body>
    <code>1.1.1.1</code>
    <p>HELLO <code>1.1.1.1</code>
        <span>ONE <code>two</code></span>
    </p>
    <p>WORLD <code>1.1.1.1</code></p>
    <code>1.1.1.1</code>

    <p>1.1.1.1</p>
</body>

</html>

Answer 2

Perhaps it could be done like so:

 p:has(code) code {
        color: red;
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">>
    <title>Document</title>
</head>

<body>
    <code>1.1.1.1</code>
    <p>HELLO <code>1.1.1.1</code>
        <span>ONE <code>two</code></span>
    </p>
    <p>WORLD <code>1.1.1.1</code></p>
    <code>1.1.1.1</code>

    <p>1.1.1.1</p>
</body>

</html>

Answer 3

Answer №2

The code provided is in working order. It successfully selects the necessary elements as there are no other extraneous elements to consider. If you think this setup could cause a problem, you may want to try the following alternative approach:

<p><strong>Assuming you have the IP address:</strong> <code>192.168.1.1</code></p>

This adjustment adds a strong element within the paragraph alongside the code for potential modifications.

Answer 4

The code provided is in working order. It successfully selects the necessary elements as there are no other extraneous elements to consider. If you think this setup could cause a problem, you may want to try the following alternative approach:

<p><strong>Assuming you have the IP address:</strong> <code>192.168.1.1</code></p>

This adjustment adds a strong element within the paragraph alongside the code for potential modifications.

Answer 5

Answer №3

As of now, CSS does not offer a way to target an element that is without any sibling elements such as text nodes.

However, if you have the ability to include a <script> tag similar to how the <style> tag is included, achieving this using JavaScript becomes feasible.

If including scripts is not an option, then altering the HTML generation may be necessary.

<!DOCTYPE html>
<html>

<head>
  <style>
    code {
      display: inline-block;
      padding: 0;
      color: red;
      font-family: ui-monospace,"Cascadia Mono","Segoe UI Mono","Liberation Mono",Menlo,Monaco,Consolas,monospace;
    }
    
    .code-block {
      display: block;
      white-space: pre;
      padding: 20px;
      line-height: 1.25;
      background: #eee;
      border: 1px solid #ccc;
      margin: 1em 0;
    }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      [...document.querySelectorAll('p > code')].filter(code => 
        code.parentElement.childNodes.length === 1
      ).forEach(code => code.classList.add('code-block'));
    })
  </script>
</head>

<body>
  <p>Assuming you have the IP <code>1.1.1.1</code>:</p>

  <p><code>
echo "hello world";
echo "another command here";
echo "you are done";
</code></p>
</body>

</html>

Answer 6

As of now, CSS does not offer a way to target an element that is without any sibling elements such as text nodes.

However, if you have the ability to include a <script> tag similar to how the <style> tag is included, achieving this using JavaScript becomes feasible.

If including scripts is not an option, then altering the HTML generation may be necessary.

<!DOCTYPE html>
<html>

<head>
  <style>
    code {
      display: inline-block;
      padding: 0;
      color: red;
      font-family: ui-monospace,"Cascadia Mono","Segoe UI Mono","Liberation Mono",Menlo,Monaco,Consolas,monospace;
    }
    
    .code-block {
      display: block;
      white-space: pre;
      padding: 20px;
      line-height: 1.25;
      background: #eee;
      border: 1px solid #ccc;
      margin: 1em 0;
    }
  </style>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      [...document.querySelectorAll('p > code')].filter(code => 
        code.parentElement.childNodes.length === 1
      ).forEach(code => code.classList.add('code-block'));
    })
  </script>
</head>

<body>
  <p>Assuming you have the IP <code>1.1.1.1</code>:</p>

  <p><code>
echo "hello world";
echo "another command here";
echo "you are done";
</code></p>
</body>

</html>

Answer 7

Answer №4

It's unlikely that you'll achieve exactly what is needed using CSS alone, but you can come close (like placing the IP address on the same line as the text and changing its color to black) by targeting the ::first-line of the code element.

Here's an example that demonstrates this:

https://i.stack.imgur.com/2Q7lG.png

<!DOCTYPE html>
<html>

<head>
  <style>
    code {
      display: inline-block;
      padding: 0;
      color: red;
    }
    
    p>code:only-child {
      white-space: pre;
      padding: 20px;
      line-height: 125%;
      background: #eee;
      border: 1px solid #ccc;
      margin: 1em 0;
    }
    
    p>code:only-child::first-line {
      color: black;
    }
  </style>
</head>

<body>
  <p>Assuming you have the IP <code>1.1.1.1</code>:</p>

  <p><code>
echo "hello world";
echo "another command here";
echo "you are done";
</code></p>
</body>

</html>

Please note that the demonstration works in this scenario because there is a blank line within the actual code block, which prevents the first echo line from being selected.

Answer 8

It's unlikely that you'll achieve exactly what is needed using CSS alone, but you can come close (like placing the IP address on the same line as the text and changing its color to black) by targeting the ::first-line of the code element.

Here's an example that demonstrates this:

https://i.stack.imgur.com/2Q7lG.png

<!DOCTYPE html>
<html>

<head>
  <style>
    code {
      display: inline-block;
      padding: 0;
      color: red;
    }
    
    p>code:only-child {
      white-space: pre;
      padding: 20px;
      line-height: 125%;
      background: #eee;
      border: 1px solid #ccc;
      margin: 1em 0;
    }
    
    p>code:only-child::first-line {
      color: black;
    }
  </style>
</head>

<body>
  <p>Assuming you have the IP <code>1.1.1.1</code>:</p>

  <p><code>
echo "hello world";
echo "another command here";
echo "you are done";
</code></p>
</body>

</html>

Please note that the demonstration works in this scenario because there is a blank line within the actual code block, which prevents the first echo line from being selected.

CSS selector for the only child element without any other adjacent sibling elements that are non-space characters

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Problem aligning ul within div element

problem with the height of the side navigation bar

What is the best way to create a button that can cycle through various divs?

What is the best way to create a single HTML file that can showcase several different pages?

Issue with host-context scss rules not appearing in final production version

Transferring the dirty state of the view to the parent form

Utilizing absolute positioning with a rotated div element

Is there a potential white-space issue with jQuery CSS in Internet Explorer versions 7 and 8

Combining various types of data into a single dataframe

Ensure that the text is wrapped properly when implementing innerHTML functionality

Validation is not being enforced for the input field labeled as 'name' in the form

How to position the figcaption within a card?

Fixing the Responsive Menu Issues

My @media queries are causing me some issues

Issue with a Jquery toggleClass function not working properly on hover

Manipulate the default option in a Select field with JavaScript

`CSS animation for vanishing line effect`

Tips for avoiding the display of the overall scrollbar while utilizing grid with an overflow:

Calculate the total width of LI elements and apply it to the parent UL or DIV

Whenever I insert an http link for FontAwesome, the icons work perfectly fine. However, when I try to host it locally,