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

What's the best way to align divs vertically in a compact layout?

Reposition picture "overlays" additional HTML components

Move the scroll bar outside of the div and set it to automatically overflow

Retrieve the text content of the paragraph element when its parent is clicked. The paragraph element belongs to a group that contains many

sliderLighter: keep the slider moving smoothly at a constant speed

Simulating a mobile device screen size using an embedded iframe

A step-by-step guide on changing an image

Unable to replicate the functionality of the tab key using jQuery for the enter key

When attempting to click on my subtopics using jQuery, they do not appear as expected

What could be causing my Bootstrap (3) grid to not display responsively?

Issue with displaying HTML escaped characters such as "&#39" results in showing a pound sign instead of a single quote

What is the process for converting HTML assets into a SCORM package?

What causes pagination to be displayed outside of the main section in Firefox when using swiper?

"Embed a div element over a full-screen iframe or image

Issue with checkboxes preventing submission of form

Challenges with Knockout.js Virtual Elements in Different Environments

How can I use the store command to retrieve the href value of a link using a css selector in Selenium?

State in Angular stubbornly refuses to switch despite condition changes

Shopping cart feature in PHP - Ajax response only functioning once

How can you hide specific elements in HTML/CSS based on window size without relying on media queries?