<div id="footerSearchInputDefault" class="defaultText" style="visibility: hidden;">Search myTwonky</div>
With respect to selenium, in the above, what is
attribute
element
value
text
label
I keep getting confused between these terms and the explaination of the above example would help a lot.
Thanks.
Element: <div></div>. This is the basic block, everything else is added to the element.
Attribute: id, class, style. Attributes are any extra information added inside the element's tag.
Value: None in your example. Value is a special attribute that form elements have. A browser usually uses the value attribute to transmit data when the form is submitted (think of a username-password form)
Text: Search myTwonky. This is anything wrapped by the element tags.
Label: None in your example. A label is a special element that usually goes before an input element (again in a form). This is usually something like "Password:" which as the name suggests, is a label for an input field in a form
Related
I have this strange code:
<h1>Firmware 0.6 <span="postdate">April 02, 2015</span>
</h1>
How can I change only this certain span that has ="postdate" in it with CSS?
The problem occurs in a widespread template in the posttime of for example: http://luebeck.freifunk.net/2015/01/07/announce-0.6.html
the main source in github is corrected already, But I wonder how to fix such with only access to the CSS file.
That's not valid HTML.
If you validate it using an HTML validator, you will receive the following:
an attribute specification must start with a name or name token
An attribute name (and some attribute values) must start with one of a restricted set of characters. This error usually indicates that you have failed to add a closing quotation mark on a previous attribute value (so the attribute value looks like the start of a new attribute) or have used an attribute that is not defined (usually a typo in a common attribute name).
For what it's worth, you can technically select it by escaping the =/" characters.
Unfortunately, this will also select all succeeding elements due to the syntax error in the HTML.
span\=\"postdate\" {
color: red;
}
<span>Other span</span>
<span="postdate">April 02, 2015</span>
<p>Some paragraph</p>
<span>Everything appearing after the invalid span will get selected due to the syntax error!</span>
Ignoring the weirdness and considering it just another span there's usually another way to select it as it has a unique place in the DOM (though what that is may be unpredictable with dynamically created content such as you get in a CMS).
I'm guessing you've thought to target any ancestor items with an id attribute or determine if there's a way to target it through ancestors without affecting sibling spans or spans that sit within a similar structure elsewhere? Basically - does it sit within a unique structure in some way?
If not then you could also try to target it through span:nth-child(5). There's also a fist-child and last-child. This may help uniquely target it within the overall structure. https://css-tricks.com/useful-nth-child-recipies/
You could also try to enter an inline script in the html view of the wysiwyg (a bad CMS may allow this!) which will allow you to check the content of spans and do something to if it matches (like add a class or id for a styling hook).
Is it possible to add custom formatting markup to MediaWiki?
Say, for example, I have a div style I use quite often and I'd like to make markup to apply it more quickly than using <div id="frequentlyusedstyle">Title</div> -- like surrounding the text with ##Title## instead of typing out the div id. Is that possible?
(I realize that there is already heading markup; that's just an example. Thank you in advance!)
Just create a new page named "Template:name", where 'name' is whatever you want to name it, with the following text (as per your example):
< div id="frequentlyusedstyle">{{{1|}}}< /div>
(minus the extra spaces, since I don't know how to keep html from
parsing here.)
You would then use it by adding {{template name|Title}} to an article, and it will invoke the style.
You will need to have a style defined in MediaWiki:Common.css or similar, in order to style that div, such as:
#frequentlyusedstyle {
color: red;
}
Hope that helps.
I'm doing functional testing using CasperJS's test class, and can't seem to select elements by their text values. My goal is to check that a class of div is visible, and then check it has the value I expect.
I've tried using the CSS3 selectors mentioned on CaspersJS' selector page, but must be doing something wrong. None of the following work for me (all enclosed in ""):
div#myid[text()='sometext']
div#myid[text='sometext']
div#myid[text=sometext]
div#myid:contains('sometext')
div#myid:contains(sometext)
Any pointers as to how I can select a specific element based on it's text value?
Try:
var x = require('casper').selectXPath;
this.test.assertExists(x('//*[#id="myid"][text()="sometext"]'), 'the element exists');
Thanks for the comments above - I ended up going with using jQuery (as it was being loaded on the client) through evaluate() calls in the CasperJS tests.
I have the following checkbox with a class on it, for future use
.class{onClick: "doSomething()"}= check_box #var, :var
But there's a problem. Let's pretend |AAAA| is the buton, if i click on the ==.. it still triggers doSomething().
|AAAA| ====================
I tryied with
display: block
in css but it doesn't work
Thanks
That's because both the label and input area are enclosed in the .class.
Instead, specify via js that you only want the checkbox input to trigger your JS action, and not the label.
= check_box #var, :var, id: 'my-id'
Then:
:javascript
$("input#my-id").click(function() {
doSomething();
});
What is generated html?
Looks like you've set onClick handler to outer div, not to the checkbox.
( I assume you have reasons to use inline javascript instead on unobtrusive one)
There may be 2 reasons this:
1: You have a label tag around the checkbox as well as element containing ==================== (As you said in the question )
2: You may not have given the class to checkbox, rather it is bound to another element that contains checkbox.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS: div id VS. div class
I am new to CSS and have general question: how do you decide wether it is better to use class selector or id selector?
The answers on this page are all good, but approach the difference from a more pragmatic point of view. Let me try an explain it to you from another point of view. The id you use when you define a conceptual entity of your page, for example a list of something, or a page footer or a navigational menu. Something of which you generally have merely one, as another wouldn't make sense or would be another type of entity. When you have a pattern of repeating entities, or element which serve the same purpose you tend to assign them a class, think about section headers, photos in a gallery etc. So the items in the previously mentioned list would all be assigned the same class name.
Note though, that merely for styling reasons you could do with just classes, never use a single id, and be perfectly fine. It doesn't matter whether your class is used just once, or many times.
From the W3C standards an id should only be used once on a page, while a class can be used multiple times.
"ID" definition from http://www.w3schools.com/tags/att_standard_id.asp
The id attribute specifies a unique id for an HTML element.
The id must be unique within the HTML document.
The id attribute can be used by a JavaScript (via the HTML DOM) or
by CSS to make changes or style the element with the specified id.
"Class" definition from http://www.w3schools.com/tags/att_standard_class.asp:
The class attribute specifies a classname for an element.
The class attribute is mostly used to point to a class in a style sheet.
However, it can also be used by a JavaScript (via the HTML DOM) to make changes
to HTML elements with a specified class.
Since an id should be unique on the page it is also accessed A LOT faster through javascript
Id must be unique, class is not. So it depends on how you want to section the page.
id identifies uniquely an element, so you use it when you have only one element with it (ex ...
the class is applied to a group of elements with same features.
best practice says id is unique in the whole html page
ID's should be used for single elements:
<table id="specialtable">
Classes should be used for multiple elements:
<h3 class="awesomeheader"> <!-- an awesome header -->
<h2 class="awesomeheader"> <!-- another awesome header -->
It's good to use an id when you only have one item that you need to style for. Ex:
<div id = 'myDiv>Text</div>
#myDiv
{
display: block;
}
But when you have multiple items that you want to style the same way (say on multiple pages with css file for example) it is faster (and better) to use a class
<div class = "MyDiv> text </div>
<div class = "MyDiv> more text</div>
.MyDiv
{
color: black;
}