How to target content through css


Tags: css

Problem :

I have this html that I cannot edit:

<div id="menu">
 <a href="">Home</a> &nbsp;|&nbsp;
 <a href="">Meet Our Physicians</a> &nbsp;|&nbsp;
 <a href="">Services</a> &nbsp;|&nbsp;
</div>

I have to make it responsive and when when on mobile I want to delete the &nbsp;|&nbsp;

How can I target it? Something like:

@media screen and (max-width:480px){
element{
display:none;
}
}


Solution :

The only way to emulate this (CSS cannot target text that is not part of an element, unfortunately), is to target the containing element and then override the styling in the descendant <a> elements:

@media screen and (max-width:480px){
    #menu {
        font-size: 0;
    }
    #menu a {
        font-size: 16px; /* or whatever */
        margin: 0 0.5em; /* or whatever, to restore some spacing between elements */
    }
}

    CSS Howto..

    How to make 2 divs on 1 side (up&down)

    How to ensure buttons reversed by CSS are spaced evenly?

    How put a top border to a title that only cover the letters in css

    Text overlay over image on hover. How to stop other divs from moving

    How to expire cached pages when only the CSS url changes

    How to add style to words (HTML/CSS)

    How to restrict the contents in a table data() of a table to a certain limit?

    How can i find and change css style in ruby?

    How to Auto set the height of a div using the height of another div

    angularjs ui-grid changing column height to auto causes weird line to show up on other columns

    How to float a
    echoed in the footer over a
    located elsewhere (PHP/jQuery/HTML/CSS)

    How to Access A To String Function with PHP?

    How to arrange input elements to columns or other way to improve form readability

    How to color the Horizontal and Vertical Lines at (0,0) darker in JavaFX

    How to achieve this awesome CSS animation

    How fix position element so that while hovering on one element other two element should remain at same place

    How can I make a div *not* expand to fill it's parent?

    How to style differently only the first list item from unsorted list

    How to make a diagonal css gradient without the colors blending together(a sharp color change) that's displaced 70% to the right?

    How to make JS/Jquery Css and HTML popup

    How to Center a image with HTML CSS

    How can one use scroll bar images?

    How to select the parent's parent in CSS?

    How to make only background image transparent in responsive square grid?

    How to change a div top margin without leaving a white space?

    How to write css for alt attribute of img tag (word-break: break-all property doesn't work in IE)

    How to set stylesheet programmatically in an ASP.NET MVC 2 project?

    How can i overlay an 10x10px image on top of another image?

    How can I wrap lines of text in an unordered list?

    Show X and Y coordinates?