Is there a specific CSS selector that targets elements with "multiline" content?

My website has a menu that displays with the following CSS:

a
{
  background:red;
}
<a href="#">Home</a>
<a href="#">Downloads</a>
<a href="#">Contact</a>
<a href="#">FAQ</a>
<a href="#">Disclaimer</a>

When the screen width is sufficient, the menu appears in one line.

However, on smaller screens like smartphones, the menu wraps onto multiple lines.

Is there a CSS selector that can address this scenario?

In this case, changing the background color to green with such a selector would suffice.

htmlcss

Answer №1

If you're familiar with your font values and the exact height of a single line, here's a clever trick to play with:

Give it a try by resizing your screen and watch the magic happen:

.nav {
  position:relative; /* Make it relative, not on the links */
  font-size:20px;
  line-height:1.2em; /* The height of a single line */
  z-index:0;
} 

a {
  clip-path:inset(0); /* Clip the pseudo element to the size of the element */
  display:inline-block;
  color:#fff;
  padding:0 10px;
}
a:before {
 content:"";
 position:absolute;
 z-index:-1;
 inset:0;
 background:
   /* The green will show if 100% (height) is larger than 1.2em (one line) */
   linear-gradient(green 0 0) 0/100% calc(100% - 1.2em),
   red;
}
<div class="nav">
<a href="#">Home</a>
<a href="#">Downloads</a>
<a href="#">Contact</a>
<a href="#">FAQ</a>
<a href="#">Disclaimer</a>
</div>

Answer №2

Here is the HTML code:

  <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="styleSheet3.css" rel="stylesheet" />
    <title>Document</title>
</head>

<body>

    <div id="nav">
        <a href="#" class="active"> Home</a>
        <a href="#">Downloads</a>
        <a href="#">Downloads </a>
        <a href="#">Contact</a>
        <a href="#">FAQ</a>
        <a href="#">Disclaimer</a>
    </div>
    <div id="small_nav">
        <div id="header">
            <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48" viewBox="0 0 48 48">
                <g>
                    <path id="path1" transform="rotate(0,24,24) translate(9,13.0382820367813) scale(0.9375,0.9375)  "
                        fill="#1C9E51"
                        d="M1.230957,19.693036L30.768982,19.693036C31.506958,19.693036,32,20.185041,32,20.923019L32,22.154038C32,22.893054,31.506958,23.384999,30.768982,23.384999L1.230957,23.384999C0.49194336,23.384999,0,22.893054,0,22.154038L0,20.923019C0,20.185041,0.49194336,19.693036,1.230957,19.693036z M1.230957,9.8470059L30.768982,9.8470059C31.506958,9.8470059,32,10.339011,32,11.076989L32,12.30801C32,13.045987,31.506958,13.53903,30.768982,13.53903L1.230957,13.53903C0.49194336,13.53903,0,13.047025,0,12.30801L0,11.076989C0,10.339011,0.49194336,9.8470059,1.230957,9.8470059z M1.230957,0L30.768982,0C31.506958,-6.3337211E-08,32,0.49298194,32,1.2309594L32,2.4619804C32,3.1999579,31.506958,3.6930011,30.768982,3.6930013L1.230957,3.6930013C0.49194336,3.6930011,0,3.1999579,0,2.4619804L0,1.2309594C0,0.49298194,0.49194336,-6.3337211E-08,1.230957,0z" />
                </g>
            </svg>

        </div>


        <div id="content">
            <a href="#">Home</a>
            <a href="#">Downloads</a>
            <a href="#">Contact</a>
            <a href="#">FAQ</a>
            <a href="#">Disclaimer</a>
        </div>
</body>

</html>

Here is the CSS code:

body
{direction:rtl;
}
#nav {
   
   display: table;
   width: 100%
}
    
#nav  span a {
 
  

    display:block !important;
    width:100%;
    text-align:center
}
#nav span {
    display: block;
    text-align: center
}
#small_nav a {
    display: block;
    text-decoration: none;
   
 
}
a
{
  background:red;
}
   
#small_nav #content {
    display: none;
   
}
#small_nav:hover #content{display:block}
#small_nav {
    cursor: pointer;
    display: none
}
@media screen and (max-width:600px) {
    #small_nav {
        display: block;
    }

    #nav {
        display: none
    }
}

It's a bit long, but I believe it's well-written. Best of luck!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling to concentrate on the branding

I've been using materializecss for some time now and recently encountered an issue while trying to navigate my website using keyboard tabbing. The checkbox in materializecss is a custom CSS checkbox, but when I set the tabindex for the label of the c ...

jqueryhtmlcssgoogle-chromematerialize

What is the best way to limit the dimension of uploaded images to a specific height and width?

function validateImageDimensions(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#uploadForm + img').remove(); var img = $('<img> ...

jqueryhtmlimagefile-upload

What is the best way to align this button next to the text and header on the page?

I'm struggling to position this button next to the paragraph element instead of below it. I want them both on the same line. <div class="up"> <div class="ban"> <div class="act"> <h2>Joi ...

htmlcssflexbox

creating a countdown timer for the carousel

While experimenting, I decided to create a basic carousel from scratch. Initially, I used onclick="function()" to cycle through the images. Later on, I attempted to replace it with onload="setInterval(function, 4000)", but it seems like something went wron ...

javascripthtmlcarousel

The layout of the divs becomes distorted when the window is resized

When adjusting the window size, all elements in the center become cramped and unresponsive. Even the navigation items in the header do not resize properly. Here is my Triangle.js file: import React from 'react' import { motion } from 'fram ...

htmlcssreactjs

Creating a design that resembles boxes for the div elements while ensuring the grid layout remains undisturbed

Hey there! I'm new to using Bootstrap and I'm trying to create boxes that look like the ones on the right side of this page: Unfortunately, I haven't had much luck so far. I tried using padding, but it messed up my grid system. I assigned a ...

htmlcsstwitter-bootstrap

Angular service unable to maintain data continuity across multiple controllers

I am facing an issue while attempting to set the title in controller1 using a service and then accessing the updated title in controller2. The function sharedProperties.setTitle(title) works perfectly fine in controller1, however, in controller2, I keep g ...

htmlangularjsangularjs-scopeangular-services

Adding a class to a clicked button in Vue.js

A unique function of the code below is showcasing various products by brand. When a user clicks on a brand's button, it will display the corresponding products. This feature works seamlessly; however, I have implemented a filter on the brands' lo ...

javascriptcssvue.jsvuejs2vue-component

AngularStrap's bs-modal is failing to display content

I have a question, here is a Plunker with the code: http://plnkr.co/edit/SNFy2XcOBefUavG1QCqD?p=preview <button class="btn btn-default" data-template="customer.tpl.html" bs-modal="modal">New Customer </button> < ...

javascripthtmlangularjsangular-strap

Creating your own personalized menu in PHP

Although I am relatively new to PHP, I have successfully developed a membership framework for my website that is fully functional. However, before diving into the design phase, there is one particular thing I am keen on achieving but unsure of how to go ab ...

phphtmlmenuhyperlink

AngularJS and the Angular UI Router were combined for the first time in

Hey everyone, I could really use some help as I'm just diving into the world of AngularJS. Can anyone guide me on how to tackle these pesky errors? Error: app.js:6 > Uncaught ReferenceError: angular is not defined Error: angular.min.js:6 > Unc ...

htmlangularjsangular-ui-router

Adjust the size of H1, H2... tags based on their own specifications, rather than the surrounding element

I have run into a bit of a conundrum with my code and cannot seem to find the right solution. Here is what I currently have: <div id="bloquetexto4" class="bloquetexto"> <H2><b>TITULO</b></H2> <p>Texto bla bla bla.</p ...

htmlcss

Instead of utilizing just one <select> element, Django mistakenly generates two while attempting to implement Bootstrap for form uploads

Struggling to develop a website using django and facing an issue where two select lists are appearing instead of one. Here is the HTML code: <form action="/upload/" method="post" enctype="multipart/form-data"> {% csrf_token %} <div class="form-g ...

pythonhtmldjangotwitter-bootstraptemplates

Error message: ngRepeat does not allow duplicate elements in an array

Upon review, I discovered this particular piece of code: <!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <script> var app = angular.module("myS ...

javascripthtmlangularjsarraysangularjs-ng-repeat

Personalized animated Reactflow Connection Lines

My goal is to develop a personalized animated connection lines in reactflow, rather than using the default dashed line that appears when the animated: true prop is applied. I am aware that we can customize the styling by using the following code snippet: ...

javascriptcssreactjsinline-stylesreact-flow

An easy way to create a hover effect on a URL link and dynamically change the

Is there a way to achieve the following? When hovering over various links, the image on the right changes. If no hover occurs, the default image will be displayed. https://i.stack.imgur.com/QXPXt.png ...

htmlcss

Flawless Carousel - Flipping the Sequence

I am currently implementing Slick Carousel on a website that I am working on. One challenge I am encountering is trying to get the "slider-nav" to move in the opposite direction than it normally does. For instance, at the moment, the order goes like this ...

javascriptjqueryhtmlslick.js

Create a Boostrap navbar with a form and links aligned to the right using the navbar

I'm trying to use navbar-right on a navbar-form and a navbar-nav, but the form ends up on one row and the nav links on another row on the right. How can I make the navbar display the brand on the left and have a search field followed by nav links on t ...

htmlcsstwitter-bootstrap

Screen readers are unable to "read" text that is identified through aria-describedby

When enhancing my web application for accessibility, I encountered a challenge. I have implemented two required fields in a form that should display separate error messages as spans. To accomplish this, I am utilizing aria-invalid to signal when the fields ...

javascripthtmlaccessibility

Employing AJAX to extract data from SQL database and display it in a tabular format

I am working on creating a 2x2 table with labels in the first row and information from an SQL table in the second row. The goal is to display the Name of the business on the left and relevant information on the right. Each name will be clickable, triggerin ...

phphtmlmysqlajax