css question

colak · 2018-03-21 14:24:35

I am trying to work out a method to exclude some css styling for linked images.

To explain… In the css I have

#content a[rel=external]:after {
content:" \21D7";display:inline-block;position:relative;font-size:1.2em;padding:0 0 0 5px
}

Which adds a ‘north east double arrow’ (⇗) after all external links. How can I get that arrow not to appear after an image pointing to an external link?

philwareham · 2018-03-21 14:36:30

Use :not()?

Documentation here.

colak · 2018-03-21 15:00:37

philwareham wrote #310206:

Use :not()?

Documentation here.

Hi Phil, thanks so much for your advice… I’m not quite sure how!

I also tried

#content a[rel=external]:after img{
content:""
}

but it does not work:(

NicolasGraph · 2018-03-21 15:00:38

philwareham wrote #310206:

Use :not()?

Documentation here.

That what I was thinking too but how would you make this work without the span tag.

Last edited by NicolasGraph (2018-03-21 15:03:24)

philwareham · 2018-03-21 16:02:05

Oh, having re-read the original question. No, there is no way to determine (in CSS) what contents are within a tag. You’d either have to specify classnames on the <a> tag depending on the content – that is easy to do if using Textpattern tags – or use some JavaScript/jQuery to detect the contents and shim a classname (this is a dirty method IMO).

JavaScript example (adds a class of image-anchor to any <a> tags with an <img> tag within them:

var imgAnchor = document.querySelectorAll('a > img')
for (i = 0; i < imgAnchor.length; i++) {
    imgAnchor[i].className = "image-anchor";
}

colak · 2018-03-22 06:50:31

philwareham wrote #310209:

Oh, having re-read the original question. No, there is no way to determine (in CSS) what contents are within a tag. You’d either have to specific classnames on the <a> tag depending on the content – that is easy to do if using Textpattern tags – or use some JavaScript/jQuery to detect the contents (this is a dirty method IMO).

JavaScript example (adds a class of image-anchor to any <a> tags with an <img> tag within them:

var imgAnchor = document.querySelectorAll('a > img')...

Adding class names to external link tags would take too long as it is a completed site. It did give me an idea though. As the linked images are few, I changed those links to nofollow…

alfbja · 2018-03-23 16:43:28

Bonjour à tous,

I would submit this :

if URL is external > double arrow

else internal nothing

a[href*="//"]:not([href*="my site"])*

It is ok for me.

_______________________________________________________
alfbja | https://www.alfnode.info

Last edited by alfbja (2018-03-23 17:16:00)

alfbja · 2018-03-23 16:56:55

all elements used :

a[href*="//"]:not([href*="my site"])

{
    background: url(/images/my double arrow) center right no-repeat;
    padding-right: 15px;
    color: #006400;
}
{
    text-decoration: none;
    font-weight: bold;
    color: #001aff;
}

_______________________________________________________
alfbja | https://www.alfnode.info

Last edited by alfbja (2018-03-23 17:15:44)

Textpattern CMS

Textpattern CMS support forum

#1 2018-03-21 14:24:35

css question

#2 2018-03-21 14:36:30

Re: css question

#3 2018-03-21 15:00:37

Re: css question

philwareham wrote #310206:

#4 2018-03-21 15:00:38

Re: css question

philwareham wrote #310206:

#5 2018-03-21 16:02:05

Re: css question

#6 2018-03-22 06:50:31

Re: css question

philwareham wrote #310209:

#7 2018-03-23 16:43:28

Re: css question

Bonjour à tous,

#8 2018-03-23 16:56:55

Re: css question

all elements used :

Board footer