2

How to create a css selctor for a checkbox with :: before selector. I want to create css selector of a radio button . I am using the selector for eg: [data-model-cid="c279"]>label in firepath and it shows me the element.However in the test script its unable to get the element.In google console when I try to get the element by $('[data-model-cid="c279"]>label') it is unable to fetch the element.So I think the :: before selector needs to be added in the selector to search the element. The Html is given below.How to write a selector with the :: before ?

    <div class="radio" data-model-cid="c279">
      :: before
    <input id="pac-item-care-plan-4 years-45924345-view261" class="js-care-plan-update" type="radio" value="45924345" name="pac-item-care-plan-view261" data-analytics-id="cpradio" data-groupid="472AB3B8BDAD4A4AA78A7CF484FFA7E4" data-offerid="F259143E766145DF8F50DF46F9EC10B7" data-action="add" checked="checked"/>
    <label class="no-wrap" for="pac-item-care-plan-4 years-45924345-view261">
      :: before
      4 years 
    <strong>(+ $39)</strong>
    </label>
    </div>
nightmag
  • 31
  • 3
  • `:before` elements do not exist for javascript, as they are not actual elements. The `[data-model-cid="c279"] > label` should work, though. – somethinghere Dec 23 '15 at 19:04
  • 2
    Possible duplicate of [Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery](http://stackoverflow.com/questions/5041494/selecting-and-manipulating-css-pseudo-elements-such-as-before-and-after-usin) – Stickers Dec 23 '15 at 19:07
  • It is not working .In google console ```$('[data-model-cid="c279"]>label').text()``` gives "" and ```$('[data-model-cid="c279"]>label')``` gives [] its unable to get the element – nightmag Dec 23 '15 at 19:09
  • There could be many reasons for this - be it where you place your JS, whether you wait for `DOMContentLoaded`, ... But the query string is correct in regards to the code you posted and should select the correct element. – somethinghere Dec 23 '15 at 19:11

1 Answers1

1

From what I know you cannot do this, mainly because an input is an empty tag (self-closing) and it basically has no content.

within a <div> element if you look at the following example

<style>
    .my-div::before {
        content: 'before';
    }

    .my-div::after {
        content: 'after';
    }
</style>
<div class="my-div"></div>

You'll notice in the chrome devtools you'll get something like this

<div class="my-class">
    ::before
    ::after
</div>

This is possible because the ::before and ::after psuedo-elements live inside the div tag, if you add another child div with a height and a background you'll see the words before pop up above the child div and after pop up after the child div - this is because they are basically children but inserted in a different way (through CSS).

The following is what you're looking for the browser to do

<input type="radio"></input>

to

<input type="radio">
    ::before
    ::after
</input>

But this is wrong already since the input tag shouldn't have any content in it. Most browsers will probably ignore this or even try to fix your markup for you but you simply won't be able to get this working.

From the documentation on MDN

"The :before and :after pseudo-elements elements interact with other boxes... as if they were real elements inserted just inside their associated element."

A correct <input> tag looks like this:

<input type="radio" />

And since this doesn't have any room to place the ::before and ::after in it won't work. You'll have to find an alternative solution unfortunately.

SidOfc
  • 4,552
  • 3
  • 27
  • 50