How to make a condition in CSS with an HTML attribute?


Tags: html,css

Problem :

I'm trying to make a condition in CSS. To do that I have to access to an HTML attribute and, depending on its value, show True or False, but I don't know how to do it.

<div class="block">
      <div class="question">
      Question
      </div>
      <div class="answer" data-value="true">
      </div>
</div>

The CSS file works fine when I write

.answer:after {
content: "OK";
}

But when I try to access to the attribute "data-value" with a CSS selector, the content specified it's not shown:

.answer:after[data-value="true"] {
content: "True";
}

.answer:after[data-value="false"] {
content: "False"; 
}


Solution :

Here is the solution of applying CSS using Data-Attribute.

.answer:after {
content: "OK";
}

.answer[data-value="true"]:after {
content: "True";
}

.answer[data-value="false"]:after {
content: "False"; 
}
<div class="block">
      <div class="question">
      Question
      </div>
      <div class="answer" data-value="true">
      </div>
</div>


    CSS Howto..

    How to adjust the width of a DIV per height using CSS

    How to align a picture,name and the post with css like facebook does?

    How to display text over responsive image by css

    jQuery - How to revert css changes when using slideToggle()?

    How to Clear Every Third Box in a Row? [duplicate]

    How to parse the default css property to inline style attribute

    How to send an HTML file with css?

    How can I add a consistent left margin to a checkbox label?

    How to change CSS attribute at all div inside td with class

    How to style sets of labels and fields in a form with pure CSS and get proper alignment?

    How to make the css affect the new content loaded by jquery?

    How to add color to text in my div with code

    How to place text at the bottom when there's predefined height!

    How not differ tableview focused rows from other rows?

    How to implement CSS file style on selected div

    How can one select a parent element several levels above the child element utilizing the 'hover' selector and ':has()'?

    How to positioning the tooltip above cursor

    Learning CSS, how to use stylesheet with master page

    How can i find and change css style in ruby?

    How to center video source in circle shape using css, html

    How to correctly style a form?

    How to include a css class that is an image on codeigniter form submit?

    How to switch left and right in a css file?

    How to get element by its partial class name CSS

    How to make section element in css to full width

    How to make lightbox scroll the lightbox and not the page

    How to Automatically Close Alerts using Twitter Bootstrap

    CSS How to properly replace links by button background

    How to style HTML5 input type=“datetime-local” [duplicate]

    How to add JS to Wordpress and reference CSS or other scripts?