How to write CSS code without using :not selector?


Tags: html,css,css3,internet-explorer-8,css-selectors

Problem :

I have an article page that I am making small CSS changes, such as margin and font size, to. My code has to be able to be supported by Internet Explorer 8 and above. The problem is, I am using some CSS selectors that IE8 does not support. How do I write my CSS code without using the :not selector?

HTML for sample article page

<div class="entry">
  <h3 class="social-title>Share This Article </h3> 
  <div class="social-content>
    <table>
      <td><a href="twitter.com"><img class="" src="twitter.png"><span class="">Twitter</span></a></td>
      <td><a href="facebook.com"><img class="" src="facebook.png"><span class="">Twitter</span></a></td>
    </table>
  </div>

<!-- The article would start here -->
  <p class="category_row"><h1 class="category-title>Lifestyle</h1></p>
  <p style="margin: 0in 0in 0.0001pt; line-height: 13.5pt; vertical-align: baseline;"><a href="example.com/article.html"><img alt="" style="float: left;" src="example.jpg"></a>Article goes starts here...</p>
  <p style="margin: 0in 0in 0.0001pt; line-height: 13.5pt; vertical-align: baseline;">Second paragraph</p>
  Third paragraph
</div>

CSS I am using

.entry p:not(.category_row) {
font-size: 14px;
line-height:22px;
}

img (margin: 10px)

So far example, if I wanted to add margin to the image that is in the article section, how would I write the CSS code so that it only affects the image in the article section and not the images in the <div class="social-content">? Without using :not?

Also how would I write CSS code to change the font-size of the article to a font size of 14px and line height of 22px? Without affecting everything else above (not in the article section) ?

Sorry if this is confusing, but I will clarify more if need be!



Solution :

You will need to be more verbose if you want to support older browsers. The joy of the newer syntaxes is we are able to be more pithy, but if you have IE 8 in your supported list of browsers, you'll need to start with styling more general selectors and then overriding those styles in more precise selectors.

.entry p {
   font-size: 14px;
   line-height:22px;
}

.entry p.category_row {
  font-size: XXpx;
  line-height:XXpx;
}

I don't know where your article section begins from your markup. Figure out what is the most logical container for image would be, and then constrain your selector with it. Note article is an HTML5 element, so you would be remiss not to use it:

<article>
  <img ... />
</article>

And article images would be styled with this simple selector: article img { ... }

If you want to use article with IE 8, be sure to include this: https://code.google.com/p/html5shiv/


    CSS Howto..

    How to get an automatic effect of rosace in css ?

    How to adjust the height of the footer automatically

    How do I make a placeholder for a 'select' box?

    How to mask semi circles inside a rectangle and mask through css?

    How can I place rotated text against a table with HTML and CSS?

    How to apply an opacity without affecting a child element with html/css?

    how to create a fullscreen website design?

    How to reduce responsively the height of images in the flexbox layout to fit window height?

    How to make width of nested CSS elements all the same?

    css ul and li - multiple spans in each li and how to line up the spans vertically

    How to scale the image with css

    How to create two containers within a row that responsively keep equal heights?

    How to align text and image in a CSS box?

    Apple's Website - How Does It Autosize Itself For Mobile Devices?

    How can I absolutely position a related image_tag?

    how to position divs within another div

    How to generate a elongated hexagon shape with two circular sides?

    How does max-width property make images responsive?

    How to remove pipe separator of the first list item on the line?

    how to change “product details” text to my own text in Virtuemart?

    How do I unset CSS values?

    How do you use nth-child(odd) on table rows but you want some rows to be exempted from the css rule?

    Responsive menu show and hide on click

    How to split multiple string using jQuery or javascript?

    How to disable the Dropdown?

    How to Inherit grandparent CSS not parent?

    how do I select second submit button to imply other color

    How to Style Unique CSS Navigation Menu

    How to fixed
    in the specific location in css

    How to collectively center several divs within a parent div?